一、安裝

npm install -g vue-cli

二、創建項目

vue init 模板名 項目名 vue init webpack mymall

模板名:

1 . webpack 最常用
2 . webpack-simple // 一個簡單webpack+vue-loader的模板，不包含其他功能。
3 . browserify // 一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
4 . browserify-simple // 一個簡單Browserify+vueify的模板，不包含其他功能。
5 . pwa // 基于webpack模板的vue-cli的PWA模板
6 . simple // 一個最簡單的單頁應用模板

執行指令后，會讓用戶輸入幾個基本的選項（vue-router在這里就安裝了）

Project name :項目名稱 ，如果不需要更改直接回車就可以了。注意：這里不能使用大寫。
Project description:項目描述，默認為A Vue.js project,直接回車，不用編寫。
Author：作者，如果你有配置git，他會讀取.ssh文件中的user。
Install vue-router? 是否安裝vue的路由插件，Y代表安裝，N無需安裝，下面的命令也是一樣的。
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha。
Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試。
Should we run npm install for you after the project has been created?(recommended)npm

三、build文件夾注意點

3.1 package.json – npm run dev時做了什么？

3.1.1 文件目錄

|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- utils.js // 構建工具相關
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置,構建開發本地服務器
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
| |-- test.env.js // 測試腳本的配置
|-- src // 源碼目錄
| |-- components // vue所有組件
| |-- router // vue的路由管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態文件，比如一些圖片，json數據等
|-- test // 測試文件
| |-- e2e // e2e 測試
| |-- unit // 單元測試
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .eslintignore // eslint檢測代碼忽略的文件（夾）
|-- .eslintrc.js // 定義eslint的plugins,extends,rules
|-- .gitignore // git上傳需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 項目說明，markdown文檔
|-- index.html // 訪問的頁面
|-- package.json // 項目基本信息,包依賴信息等

package.json其中這段代碼：

當npm run dev時，執行了：

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

這句話的意思是利用 webpack-dev-server 讀取 webpack.dev.conf.js 信息并啟動一個本地服務器。

3.2 dependencies 與 devDependencies

dependencies 是運行時依賴（生產環境） npm install --save (package name)
devDependencies 是開發時的依賴（開發環境） npm install –save-dev (package name)

3.3 基礎配置文件 webpack.base.conf.js – 告訴webpack加載后綴為（.js .vue .json）的文件

resolve的extensions告訴wepack要加載后綴為（.js .vue .json）的文件

alias創建別名，將@解析為src

使用不同loader解析（vue/js/圖片/多媒體/字體）
其中：對src和test文件夾下的.js文件使用babel-loader將es6+的代碼轉成es5
能夠使用戶在引入模塊時不帶擴展

38 /**39 * 當webpack試圖去加載模塊的時候，它默認是查找以 .js 結尾的文件的，40 * 它并不知道 .vue 結尾的文件是什么，41 * 所以我們要在配置文件中告訴webpack，42 * 遇到 .vue 結尾的也要去加載，43 * 添加 resolve 配置項，如下：44 */45 resolve: {46 extensions: ['.js', '.vue', '.json'],47 alias: { // 創建別名48 'vue$': 'vue/dist/vue.esm.js',49 '@': resolve('src'), 50 }51 },52 // 不同類型模塊的處理規則 就是用不同的loader處理不同的文件53 module: {54 rules: [55 ...(config.dev.useEslint ? [createLintingRule()] : []),56 {// 對所有.vue文件使用vue-loader進行編譯57 test: /\.vue$/,58 loader: 'vue-loader',59 options: vueLoaderConfig60 },61 {// 對src和test文件夾下的.js文件使用babel-loader將es6+的代碼轉成es562 test: /\.js$/,63 loader: 'babel-loader',64 include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]65 },66 {// 對圖片資源文件使用url-loader67 test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,68 loader: 'url-loader',69 options: {70 // 小于10K的圖片轉成base64編碼的dataURL字符串寫到代碼中71 limit: 10000,72 // 其他的圖片轉移到靜態資源文件夾73 name: utils.assetsPath('img/[name].[hash:7].[ext]')74 }75 },76 {// 對多媒體資源文件使用url-loader77 test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,78 loader: 'url-loader',79 options: {80 // 小于10K的資源轉成base64編碼的dataURL字符串寫到代碼中81 limit: 10000,82 // 其他的資源轉移到靜態資源文件夾83 name: utils.assetsPath('media/[name].[hash:7].[ext]')84 }85 },86 {// 對字體資源文件使用url-loader87 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,88 loader: 'url-loader',89 options: {90 limit: 10000,91 name: utils.assetsPath('fonts/[name].[hash:7].[ext]') // hash:7 代表 7 位數的 hash92 }93 }94 ]95 },

3.4 開發環境配置文件 webpack.dev.conf.js

// webpack-dev-server服務器配置 devServer: { hot: true, // 開啟熱模塊加載} plugins: [new HtmlWebpackPlugin({// 指定編譯后生成的html文件名filename: 'index.html',// 需要處理的模板template: 'index.html',// 打包過程中輸出的js、css的路徑添加到html文件中// css文件插入到head中// js文件插入到body中，可能的選項有 true, 'head', 'body', falseinject: true}),

3.5 生產模式配置文件 webpack.prod.conf.js

打包時做了什么

// copy-webpack-plugin，用于將static中的靜態文件復制到文件夾dist const CopyWebpackPlugin = require('copy-webpack-plugin')new HtmlWebpackPlugin({minify: {// 刪除index.html中的注釋removeComments: true,// 刪除index.html中的空格collapseWhitespace: true,// 刪除各種html標簽屬性值的雙引號removeAttributeQuotes: true}})

四、 .編碼規范.editorconfig （自定義）

這也就是eslint在檢查代碼的依據

1 root = true 2 3 [*] // 對所有文件應用下面的規則 4 charset = utf-8 // 編碼規則用utf-8 5 indent_style = space // 縮進用空格 6 indent_size = 2 // 縮進數量為2個空格 7 end_of_line = lf // 換行符格式 8 insert_final_newline = true // 是否在文件的最后插入一個空行 9 trim_trailing_whitespace = true // 是否刪除行尾的空格

五、組件駝峰命名

5.1組件中 （html短橫線，模板字符串駝峰）

js中（模板字符串 {{ }} ）：vue的組件的props屬性支持駝峰命名camelCased ,不支持連接線命名,使用是用連接線進行賦值或者數據綁定!
html中：HTML 特性是不區分大小寫的，要使用連接線 kebab-case (短橫線隔開式)

var myname={'first-name':'9','last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']);打印出來是 NaN 9

js中：之所以沒有前面沒有打印出來9,是因為程序走的時候,把英文連接符當做減號看待,myname.first和name是undefined,所以會 undefined-undefined=NaN
具體應該看vue文檔：Prop-的大小寫-camelCase-vs-kebab-case

5.2 組件名大小寫

組件注冊

定義組件名的方式有兩種：使用 kebab-case （全小寫） Vue.component('my-component-name', { /* ... */ }) 當使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>。使用 PascalCase Vue.component('MyComponentName', { /* ... */ }) 當使用 PascalCase (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。

再來看看vue官方的風格指南： 組件名為多個單詞

組件名應該始終是多個單詞的，根組件 App 以及 、 之類的 Vue 內置組件除外。
這樣做可以避免跟現有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的。

反例 Vue.component('todo', {// ... }) export default {name: 'Todo',// ... } 好例子 Vue.component('todo-item', {// ... }) export default {name: 'TodoItem',// ... }

wow 風格指南應當好好看看 😃

總結

以上是生活随笔為你收集整理的vue-cli生成项目时你应当知道的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。