利用官方的vue-cli腳手架來搭建Vue集成開發環境

在利用vue-cli腳手架搭建vue集成環境以前，咱們須要先安裝nodejs的環境。若是在cmd中輸入node --version和npm --version出現以下的版本信息，就說明安裝已經成功了。

1.全局安裝 vue-cli：  npm install --global vue-cli

 

（我這邊是之前就已經安裝好了，因此這邊顯示的是更新）

 

2.建立一個基於 webpack 模板的新項目（本地文件下面生成項目的）： vue init webpack myvue

 

若是速度特別慢的話，能夠考慮用國內阿里的源碼。命令以下：

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

 

 

關於這些選項的含義能夠參考這篇博客的內容： https://www.jianshu.com/p/2769efeaa10a

我具體摘抄出來給你們解釋一下：

vue init webpack vuetest

Test是項目名稱，這個名字本身隨便取。

命令輸入後，會進入安裝階段，須要用戶輸入一些信息

Project name (vuetest) 項目名稱，能夠本身指定，也可直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯Sorry, name can no longer contain capital letters），阮一峯老師博客爲何文件名要小寫 ，能夠參考一下。

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

Author (........) 做者，不用說了，你想輸什麼就輸什麼吧

接下來會讓用戶選擇

Runtime + Compiler: recommended for most users 運行加編譯，既然已經說了推薦，就選它了

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

Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數狀況下都使用，不過個人第一個項目中的路由是本身寫的，沒有使用到官方路由，由於有特殊需求，也由於比較早，官方還沒有成熟，vue-router官網 。這裏就輸入「y」後回車便可。

Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響總體的運行，這也是爲了多人協做，新手就不用了，通常項目中都會使用。ESLint官網

接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue項目時的代碼風格，由於我選擇了使用ESLint

Standard (https://github.com/feross/standard) 標準，有些看不明白，什麼標準呢，去給提示的standardgithub地址看一下， 原來時js的標準風格

AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法，這個github地址說的是JavaScript最合理的方法

none (configure it yourself) 這個不用說，本身定義風格

具體選擇哪一個因人而異吧 ，我選擇標準風格

Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝

Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝

 

 

3.進入webpack項目中更新工程依賴，由於如今前端項目會有不少依賴：npm install

 

（這邊須要注意的是：命令框得是由管理員啓動的才能夠！！！）

4.運行webpack項目：npm run dev

 

5.webpack項目打包：npm run build .