Vue-cli開發SPA應用(適用初學者)

使用Vue開發SPA（單頁面應用）估計各位博友都耳熟能詳了，這裏簡單概要一下使用vue-cli快速開發單頁面應用。

環境要求node 6.0以上(不要安裝7.0，這是beta版)  

下載連接https://nodejs.org/en/

安裝教程https://jingyan.baidu.com/article/fd8044faf2e8af5030137a64.html  

1.檢測電腦是否安裝了node，打開終端輸入node -v 這裏我使用的是6.10.3

2.安裝淘寶鏡像（儘管這一步沒什麼必要，可是安裝之後對以後的開發會有很大的幫助）

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

接下來就能夠使用cnpm 代替npm執行命令了，速度會很快（須要瞭解cnpm的能夠百度瞭解）

3.找一塊空的文件夾（之後的項目能夠放在這個文件夾下），按住shift鍵右擊選擇在此處打開終端，命令行繼續cnpm i vue-cli -g（安裝Vue腳手架，切記必定要全局安裝）

4.檢測一下vue-cli是否安裝了,使用vue -V(這裏是大寫的V)，我這裏是vue是2.8.1版本的

5.命令行繼續 cnpm i webpack -g(安裝webpack)

6.命令行vue init webpack 項目名（這裏寫你的項目名字，例如vueproject）

　這裏會讓你輸入項目名，描述，做者之類的，通常單頁面應用都須要路由，在選vue-router選yes，可是須要注意的是Eslint檢查代碼建議選no，這個是嚴格模式，建議不要使用！！！以後的選項都選no

7.按照提示 cd 項目名 進入你的項目所在文件夾

8.cnpm i (雖然這裏提示的是npm install,這裏使用cnpm 更加快捷一點，i 是install的簡寫),這時候你會發現文件內多了node_modules文件夾，裏面都是一些開發依賴

9.cnpm run dev 這時候項目就運行了

 

這裏你能夠修改一些東西，看下效果，這裏不須要刷新，由於webpack已經配置了熱模塊加載，無需刷新就能實現修改內容的替換。

router就是路由文件，App.vue是vue根文件，main.js是入口文件，這裏只是簡單的介紹一下Vue腳手架的搭建，以後會講解Vue項目開發的內容。

另外細心的博友會注意到在我瀏覽器的右上角會有一個Vue的圖標，這是我安裝了devtools(vue開發工具，具體能夠了解http://www.cnblogs.com/liyongshuai/p/6891463.html)