一、安裝node環境
1、下載下傳位址為：https://nodejs.org/en/
2、檢查是否安裝成功：如果輸出版本号，說明我們安裝node環境成功
3、為了提高我們的效率，可以使用淘寶的鏡像：http://npm.taobao.org/
輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org，即可安裝npm鏡像，以後再用到npm的地方直接用cnpm來代替就好了。
檢查是否安裝成功：
二、搭建vue項目環境
1、全局安裝vue-cli
npm install --global vue-cli
2、進入你的項目目錄，建立一個基于 webpack 模闆的新項目
說明：
Vue build ==> 打包方式，回車即可；
Install vue-router ==> 是否要安裝 vue-router，項目中肯定要使用到 是以Y 回車；
Use ESLint to lint your code ==> 是否需要 js 文法檢測 目前我們不需要 是以 n 回車；
Set up unit tests ==> 是否安裝 單元測試工具 目前我們不需要 是以 n 回車；
Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具 目前我們不需要 是以 n 回車；
3、進入項目：cd vue-demo，安裝依賴
安裝成功後，項目檔案夾中會多出一個目錄： node_modules
4、npm run dev，啟動項目
項目啟動成功：
三、vue項目目錄講解
1、build：建構腳本目錄
1)build.js ==> 生産環境建構腳本；
2)check-versions.js ==> 檢查npm，node.js版本；
3)utils.js ==> 建構相關工具方法；
4)vue-loader.conf.js ==> 配置了css加載器以及編譯css之後自動添加字首；
5)webpack.base.conf.js ==> webpack基本配置；
6)webpack.dev.conf.js ==> webpack開發環境配置；
7)webpack.prod.conf.js ==> webpack生産環境配置；
2、config：項目配置
1)dev.env.js ==> 開發環境變量；
2)index.js ==> 項目配置檔案；
3)prod.env.js ==> 生産環境變量；
3、node_modules：npm 加載的項目依賴子產品
4、src：這裡是我們要開發的目錄，基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案：
1)assets：資源目錄，放置一些圖檔或者公共js、公共css。這裡的資源會被webpack建構；
2)components：元件目錄，我們寫的元件就放在這個目錄裡面；
3)router：前端路由，我們需要配置的路由路徑寫在index.js裡面；
4)App.vue：根元件；
5)main.js：入口js檔案；
5、static：靜态資源目錄，如圖檔、字型等。不會被webpack建構
6、index.html：首頁入口檔案，可以添加一些 meta 資訊等
7、package.json：npm包配置檔案，定義了項目的npm腳本，依賴包等資訊
8、README.md：項目的說明文檔，markdown 格式
9、.xxxx檔案：這些是一些配置檔案，包括文法配置，git配置等
四、開始我們的第一個vue項目
1、在components目錄下建立一個views目錄，裡面寫我們的vue元件
1)開始我們的第一個元件：
a：在views目錄下建立First.vue
b：在router目錄下的index.js裡面配置路由路徑
c：template 寫 html，script寫 js，style寫樣式
d：輸入ip：http://localhost:8010/#/first，檢視頁面效果
注意：
一個元件下隻能有一個并列的 div，以下寫法是錯誤：
資料要寫在 return 裡面，而不是像文檔那樣子寫，以下寫法錯誤：
2、講講父子元件
1)在components目錄下建立sub檔案夾，用于存放一下可以複用的子元件。比如建立一個Confirm.vue元件
3)在父元件中引入子元件
引入：import Confirm from '../sub/Confirm'
注冊：在
标簽内的 name代碼塊後面加上 components: {Confirm}
使用：在
内加上
完整代碼：
2)父子元件通信
子元件：
父元件：
3、使用路由搭建單頁應用
1)按照以上方法，建立一個Second.vue元件
2)路由跳轉：去第二個頁面
路由跳轉之後，注意觀察路徑變化：
可以看到，在html中解析成了a标簽
這裡隻是簡單的介紹了一下路由的使用，更多詳細資訊，請前往官網學習：https://router.vuejs.org/zh-cn/
4、如何用less寫樣式
1)安裝less依賴：npm install less less-loader --save
安裝成功之後，可在package.json中看到，多增加了2個子產品：
2)編寫less