vue-cli腳手架

前提：node + npm 安裝好

一、介紹

vue-cli: Vue + ESLint + webpack + iview + ES6

Vue:主要框架ESLint:幫助我們檢查js程式設計時語法錯誤。原因：一個專案在多人開發，能達到一致的語法

webpack:設定代理、外掛和loader處理各種檔案和相關功能、打包等功能。整個專案的核心配置

iview:基於vue的一套樣式，裡面有很多封裝好的元件樣式

ES6:緊跟時代潮流，使用ES6語法，利用babel處理

二、安裝vue-cli,建立專案並呼叫

1.開啟cmd ,敲入命令：

npm install --global vue-cli （–global：全域性安裝）
 

2.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

三、目錄結構說明

1. bulid資料夾:

   對我們最有用並且可能會使用的就是webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js

   三個webpack的配置檔案，分別是基本webpack配置、開發環境配置、生產環境配置。

2. config資料夾:

   最主要的就是index.js 這個檔案進行配置代理伺服器，這個地方和我們息息相關，和後臺聯調就是在這裡設定一個地址就可以了。開啟index.js 找到“proxyTable“這個屬性，然後在裡面加上對應的後臺地址即可，例如：

   3.src資料夾：

   這個資料夾是整個專案最主要以及使用頻率最高的資料夾。

   “assets”: 共用的樣式、圖片

   “components”: 業務程式碼存放的地方，裡面分成一個個元件存放，一個頁面是一個元件，一個頁面裡面還會包著很多元件

   “router”: 設定路由

   "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中，分別對應全域性下載和區域性下載的依賴包

    

四、下載依賴包

npm install | npm install vue -save-dev(依賴包)

這個過程會生成node_mordules資料夾。

五、npm run dev 啟動專案