簡介

最一開始學習Vue的時候，我們通常會使用npm install vue語法安裝Vue，但是往往實際的專案開發中不太可能用這種方式去做專案，我們通常比較多的做法應該是利用webpack作為前端專案的構建工具。利用webpack構建Vue專案通常有兩種方式，一種是直接用webpack的方式，另一種則是webpack-simple的方式。

webpack 方式具有特有的兩個功能：1、Eslint 檢查程式碼規範 2、單元測試

webpack-simple 方式就反正沒有以上兩種功能，通常專案中推薦使用這種方式構建專案

vue init simple#2.0 vue-simple-demo

步驟

首先Vue的依賴於node，所以一下的操作步驟依賴於node環境完好的前提下，node中會自帶npm包管理器，由於國外的地址訪問比較慢，建議修改為淘寶映象，具體操作自己翻牆。

安裝依賴環境

1、vue-cli (安裝Vue構建框架)

  cnpm install vue-cli -g 

2、vue環境

cnpm install vue -g 

3、webpack（專案管理以及構建工具）

  cnpm install webpack -g

4、webpack-simple（simple模板）

cnpm install webpack-simple
 
 -g

5、webpack-dev-server（webpack開發工具）

npm install webpack-dev-server --save-dev

生成專案

利用vue init webpack-simple vue-simple-demo方式建立專案

生成的專案如下：

├─.babelrc      // babel配置檔案
├─.gitignore    
├─index.html        // 主頁
├─package.json      // 專案配置檔案
├─README.md  
├─webpack.config.js // webpack配置檔案
├─dist          // 釋出目錄
│   ├─.gitkeep       
├─src           // 開發目錄 
│   ├─App.vue       // App.vue元件
│   ├─main.js       // 預編譯入口