vue.js Vue2全家桶之vue-cli（vue腳手架）搭建項目超詳細教程

vue-cli這個構建工具降低了webpack的使用難度，支持熱更新，再加上有webpack-dev-server的支持，相當於啟動了一個請求服務器，幫你搭建了一個測試環境，你只需要關注開發。

vue.js全家桶系列，包含了vue-router，vuex， vue-resource，再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。

vue的官方文檔由淺到深，若不使用構建工具用起來確實很爽歪歪，但在實際項目應用中用vue-cli構建一個工程的時候，就會發現官方文檔不夠用了。vue的全家桶(vue-cli,vue-router,vue-resource,vuex)都要用上不說，還要熟練es6。

廢話不多說，我們來直接上步驟。

1.下載安裝node.js(使用npm需要安裝node環境)全局安裝webpack，快捷鍵win+R 打開命令行工具（dos/cmd）

 

 

 打開cmd后輸入node -v查看node版本，確認node安裝成功。

node -v

 

然后輸入：npm install webpack -g或者npm install -g webpack，安裝webpack

 

npm install webpack -g
或者
npm install -g webpack

 

安裝完成之后輸入 webpack -v，如下圖，如果出現相應的版本號，則說明安裝成功

 

 

 

 

 2. 全局安裝vue-cli，在cmd中輸入命令:

 

npm install --global vue-cli

 

 

安裝完成之后輸入 vue -V（注意這里是大寫的“V”,小寫v會被識別為未知項），如下圖，如果出現相應的版本號，則說明安裝成功。

 

 

 這時打開C:\Users\Andminster\AppData\Roaming\npm目錄就可以看到：

 

 

3.用vue-cli來構建項目

在D盤新建一個文件夾（Jessica）作為項目存放地，然后使用命令行cd進入到項目目錄輸入：

vue init webpack test

 

 

test是自定義的項目名稱，命令執行之后，會在當前目錄生成一個以test命名的項目文件夾。

輸入命令后，會跳出幾個選項讓你回答：（看下圖解釋問題）

 

 

 詳解：

Project name (baoge)：項目名稱，直接回車，按照括號中默認名字（注意這里的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters）

Project description (A Vue.js project)：項目描述，也可直接點擊回車，使用默認名字

Author ()：作者，輸入jessica
接下來就是選擇：

Runtime + Compiler: recommended for most users 運行加編譯，推薦使用，回車

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are .....  僅運行時，已經有推薦了就選擇第一個

Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，輸入“y”后回車即可。

Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，輸入“y”后回車
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，直接y回車

Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，輸入“y”后回車

Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，輸入“y”后回車

回答完畢后上圖就開始構建項目了。

 

4. 配置完成后，可以看到目錄下多出了一個項目文件夾test，然后cd進入這個文件夾：
安裝依賴：

 

npm install

 

 

 

如果安裝速度太慢。可以安裝淘寶鏡像，然后使用cnpm來安裝 ,打開命令行工具，輸入：

 

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

npm install ：安裝所有的模塊，如果是安裝具體的哪個個模塊，在install 后面輸入模塊的名字即可。而只輸入install就會按照項目的根目錄下的package.json文件中依賴的模塊安裝（這個文件里面是不允許有任何注釋的），每個使用npm管理的項目都有這個文件，是npm操作的入口文件。

因為是初始項目，還沒有任何模塊，所以用npm install 安裝所有的模塊。

安裝完成后，目錄中會多出來一個node_modules文件夾，這里放的就是所有依賴的模塊。

解釋下每個文件夾代表的意思(如下圖）：

 

 

5.啟動項目（開發環境）

 

npm run dev

 

如果瀏覽器打開之后，沒有加載出頁面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js內的端口：

 

 

還有，建議將build 里的assetsPublicPath的路徑前綴修改為 ' ./ '（開始是 ' / '），因為打包之后，外部引入 js 和 css 文件時，如果路徑以 ' / ' 開頭，在本地是無法找到對應文件的（服務器上沒問題）。所以如果需要在本地調試項目時打開打包后的文件，就得修改文件路徑。

 

 

注意：在進行vue頁面調試時，一定要去谷歌商店下載一個vue-tool擴展程序。

服務啟動成功后瀏覽器會默認打開一個“歡迎頁面”，如下圖：

 

.

 

6.打包上線

注意，自己的項目文件都需要放到 src 文件夾下。在項目開發完成之后，可以輸入 npm run build 來進行打包工作。

 

npm run build

 

打包完成后，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看。
項目上線時，只需要將 dist 文件夾放到服務器就行了。

另外：

1.npm 開啟了npm run dev以后怎么退出或關閉？ 用ctrl+c快捷鍵 2.--save-dev 自動把模塊和版本號添加到模塊配置文件package.json中的依賴里devdependencies部分 3. --save-dev 與 --save 的區別 --save 安裝包信息將加入到dependencies（生產階段的依賴） --save-dev 安裝包信息將加入到devDependencies（開發階段的依賴），所以開發階段一般使用它

好了，至此Vue全家桶之vue-cli（vue腳手架）搭建項目超詳細教程就完成了。若測試有問題，歡迎留言改正。