手把手教你用vue-cli搭建vue項目
本篇主要是利用vue-cli來搭建vue項目，其中前提是node和npm已經安裝好，文章結尾將會簡單提到一個簡單的例子。使用vue-cli搭建項目最開始我也是看網上的教程一步步搭下來，所以其中的一些步驟說法為了表達正確會進行一定參考。
一、 項目使用技術、框架簡單介紹
我們使用vue-cli來搭建整個項目，vue-cli就是一個腳手架，步驟很簡單，輸入幾個命令之后就會生成整個項目，里面包括了webpack、ESLint、babel很多配置等等，省了很多事。根據小高之前給的要求以及結合DSS項目中的經驗，我們今天搭建的項目結構組成為：
Vue+ ESLint + webpack + iview+ES6
Vue: 主要框架
ESLint: 幫助我們檢查Javascript編程時的語法錯誤，這樣在一個項目中多人開發，能達到一致的語法
Webpack: 設置代理、插件和loader處理各種文件和相關功能、打包等功能。整個項目中核心配置
iview: 是基於vue的一套樣式框架，里面有很多封裝好的組件樣式
ES6: 緊跟時代潮流，使用ES6語法，利用babel處理。
二、 安裝vue-cli
-
打開cmd ,敲入命令：
npm install --global vue-cli（–global：全局安裝） -
安裝好之后打開C:\Users\Administrator\AppData\Roaming\npm 可以看到這個文件夾下已經有相關的腳本文件，如圖：
此時vue-cli已經安裝好啦，往下走
三、 創建項目
- cmd打開自己的項目工作空間，然后敲入命令：
vue init webpack test（其中test為我的項目名稱） - 然后終端會出現下圖“一問一答”模式，如圖：
這里有幾個需要說明一下，沒說明的直接回車選擇默認就好，對項目沒多大影響，很傻瓜式：
“Project name”：這個是項目名稱，默認是輸入時的那個名稱，想改的話直接輸入修改，也可以直接回車
“Install vue-router”:是否需要vue-router，這里默認選擇使用，這樣生成好的項目就會有相關的路由配置文件
“Use ESLint to lint your code”:是否使用ESLint，剛才說了我們這個項目需要使用所以也是直接回車，默認使用，這樣會生成相關的ESLint配置
“Setup unit tests with Karma + Moch?”: 是否安裝單元測試。由於我們現在還沒有單元測試，所以這里選擇的是”N”，而不是直接回車哦
“Setup e2e tests with Nightwatch”：是否安裝e2e測試，這里我也同樣選擇的是“N”
這幾個配置選擇yes 或者 no 對於我們項目最大的影響就是，如果選擇了yes 則生成的項目會自動有相關的配置，有一些loader我們就要配套下載。所以如果我們確定不用的話最好不要yes，要么下一步要下很多沒有用的loader
3.全部選擇好回車就進行了生成項目，最后生成的目錄結構如下圖：
此時項目已經基本搭建完成。接下來和大家說明一下目錄結構~
四、 目錄結構說明
1. build 文件夾：
如上圖，這個文件夾主要是進行webpack的一些配置，就我個人覺得啊~對我們最有用並且可能會使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js三個webpack的配置文件，分別是基本webpack配置、開發環境配置、生產環境配置。實際上這些文件里面的內容，一些簡單的配置都已經有了，包括入口文件、插件、loader、熱更新等都已經配置好了。我們要做的只是根據自己的項目有什么loader需要增加的，比如生成環境需要加上UglifyJsPlugin插件等可以自行配置，或者一些插件增加或者不需要的刪除，其實都是和業務相關了，其他的都可以不需要動。
2. config 文件夾：
如上圖，這幾個配置文件我覺得最主要的就是index.js 這個文件進行配置代理服務器，這個地方和我們息息相關，和后台聯調就是在這里設置一個地址就可以了。打開index.js 找到“proxyTable“這個屬性，然后在里面加上對應的后台地址即可，例如：
3. src文件夾：
這個文件夾是整個項目最主要以及使用頻率最高的文件夾。
“assets”: 共用的樣式、圖片
“components”: 業務代碼存放的地方，里面分成一個個組件存放，一個頁面是一個組件，一個頁面里面還會包着很多組件
“router”: 設置路由
“App.vue”: vue文件入口界面
“main.js：對應App.vue 創建vue實例，也是入口文件，對應webpack.base.config.js里的入口配置
4.static 文件夾：
存放的文件不會經過webpack處理，可以直接引用，例如swf文件如果要引用可以在webpack配置對swf后綴名的文件處理的loader，也可以直接將swf文件放在這個文件夾引用
5.package.json:
這個文件有兩部分是有用的：scripts 里面設置命令，例如設置了dev用於調試則我們開發時輸入的是
npm run dev ；例如設置了build 則是輸入 npm run build 用於打包;另一部分是這里可以看到我們需要的依賴包,在dependencies和devDependencies中，分別對應全局下載和局部下載的依賴包
五、 下載依賴包
上一步我們已經生成好項目，現在打開之前說過的package.json 文件，找到devDependencies 和 dependencies ，在這里面可以刪掉我們不需要的，其他就則都需要使用 npm install 下載安裝，例如vue： npm install vue –save-dev
這個過程會生成一個node_modules 文件夾，這一個過程可能會有一點耗時間，但是也是傻瓜式，一個個下載，下載好之后輸入npm run dev 。如果有哪些缺漏的都會提示再補下載就好了
六、 npm run dev
當所有依賴包都下載好之后，輸入命令：npm run dev 運行就可以看到一個自帶的默認頁面打開。此時項目就已經全部搭建好並且運行了~炒雞簡單吧，總結下來其實只有四步
npm install --global vue-cli下載vue-cli腳手架vue init webpack test生成項目，形成基本結構npm install 依賴包npm run dev運行
我們接下來要做的就是業務相關的了，vue 就是一個個組件往里面加就可以了。
一個簡單的vue項目
在上面的基礎我寫了一個簡單的vue項目，主要改動的文件如下：
-
build/webpack.base.config.js
進行loader的配置，以及有一個iview的css文件不進行babel的處理，如下
2. src/router/index.js: import引入組件文件，根據vue-router寫上相應的路由配置
3.src/components:
業務代碼集中地，我做了一個簡單的，只有三個組件。然后在每個組件中又分成幾個組件構成，具體的語法需要自行學習vue
另外這個開發過程需要注意的是我們這個項目是遵循ESLint規則，所以可能運行的時候會報一些錯誤，但是大多數都是和縮進、空格之類有關的，按照提示修改即可，之后代碼會在下一篇發出來。