一、安裝

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 風格指南應當好好看看 😃