Web項目框架搭建【四】—— 前端vue.js框架搭建

vue.js框架搭建具體步驟如下：

1.安裝node 
到官網下載安裝。 
（中）https://nodejs.org/zh-cn/ 
（英）https://nodejs.org/en/

2.安裝cnpm鏡像 
（node自帶安裝了npm，故不再安裝）

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

• 1

安裝模塊時安裝方法

$ cnpm install [name]

• 1

3.安裝Vue2.0

$ cnpm install vue

• 1

4.安裝vue-cli 腳手架工具

$ cnpm install --global vue-cli

• 1

5.在某個目錄下，創建一個基於 webpack 模板的新項目

$ vue init webpack my-project
//my-project是你的項目名

• 1
• 2

創建webpack模板項目時，如果你對ES6和ESLint不是很熟的話不建議你應用它，因爲要求比較嚴格，所以一不小心就報錯，導致整個項目運行不起來，對於初學很痛苦。 

6.安裝依賴

$ cd my-project        //到項目目錄下
$ cnpm install     //安裝依賴

• 1
• 2

7.運行新創建的vue項目

$ npm run dev

• 1

運行之後會看到vue的初始頁面效果，如下圖，說明你就成功搭建了一個vue項目。（下面框出來的是官方提供的插件和awesome，很實用） 

8. 搭建完成之後的項目結構圖如下：