vue cli vue在web前端可謂是大放異彩，尤其在國內與angular、react有三足鼎立之勢。很多人想入門vue2而又苦於不知從何下手。因為vue2是以組件化開發的，最好要搭配webpack構建工具開發，而webpack很多人還不能獨立配置。 而vue cli腳手架就能很好解決這一問題。即 ...
vue-cli
- vue在web前端可謂是大放異彩，尤其在國內與angular、react有三足鼎立之勢。很多人想入門vue2而又苦於不知從何下手。因為vue2是以組件化開發的，最好要搭配webpack構建工具開發，而webpack很多人還不能獨立配置。
而vue-cli腳手架就能很好解決這一問題。即使你對webpack還不是很瞭解，你也可以先搭建好項目在慢慢研究。因為cli已經全部幫我們將需要的東西配置好了，你只要寫好項目的業務，在用命令行就可以達到調試或打包的功能。
- 在這裡我會預設大家的電腦已經裝好node環境
利用npm對vue-cli進行全局安裝
npm install -g vue-cli安裝成功後，在你的創建一個你的項目文件夾，cmd進入的文件夾
輸入命令：
接下來會有幾個要填的選項
- project name: 這個是你的項目名
- project description: 你的項目描述
- author： 作者
- Vue build： 編譯選第一個就好了，直接回車
- install vue-router： 是否裝路由
- use eslint to lint your code: 是否裝eslint檢查你的代碼規範（看個人，有些人被這個搞得要死要死的，不過我建議開啟。規範自己寫代碼的習慣，痛苦指示暫時的）
Pick an ESLint preset (Use arrow keys)（選擇題）： 選擇一個ESLint預設標準
Standard： 預設一（查看這個標準的詳情）
AirBNB ： 預設二（查看這個標準的詳情）
none： 自定義- Setup unit tests(Y/n)： 是否安裝單元測試
- Setup e2e tests with Nightwatch(Y/n)： 是否安裝e2e測試
安裝完成
接下來你就可以看到你的項目目錄了
這裡的各個文件夾所存放的分別是：
- build： webpack的配置文件(一般不用去動他)
- config: 這裡也是webpack的配置文件，不過是給我們配置的
- src: 我們的項目源代碼
- static: 靜態資源目錄（存放一些第三方js庫什麼的）
- .eslintrc.js: eslint的規則
- test: 如果裝了測試模塊的會有這個（初學者不建議先玩這個，先把基本功能搞定先）
build和config：
具體的功能我建議看hongchh的一篇文章寫的很詳細我就沒必要在寫一遍了vue-cli的webpack模板項目配置文件分析
src：
平時的代碼源碼都在這裡面寫就好了
static：
需要引入靜態資源，例如jq的一些插件庫，沒有npm和cdn的。將js放到這裡。然後在index.html里引入：
<script src="./static/lib/jq.xxx.js"></script>.eslintrc.js：
這裡可以配置不需要哪一些規則具體的規則選項可以查看eslint
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
}如何啟動項目
進入你的項目文件夾內先把依賴裝好（如果慢的話，可以切到cnpm）
npm i裝好相關依賴後再輸入命令啟動項目（開發模式）就可以看到亮眼的v了
npm run dev
如何打包：
命令：
npm run build
打包完後你就會在你的項目文件夾里發現一個dist的文件夾裡面就是打包完的項目
以上就是vue-cli全部使用(寫的不對或不足之處望指出)
