很多人在玩完了官方文檔的小例子之后，又不知道如何下手了。所以我這邊幫大家把斷層補上。大家首先要把vue的基本語法都熟悉了，然后再來這邊學習。
有了前面webpack的鋪墊，我們直接從vue的工程化開始入手，這也是vue的真正玩法。
（1）首先，我們將盤符切到d盤，打開命令行，輸入：
npm install vue-cli -g
這個vue-cli呢，是vue的腳手架工具，可以自動生成目錄，跟express生成器差不多。
（2）安裝完成后，生成一下工程，輸入：
vue init webpack vue2
這時會出現一些提示，直接一路回車即可。
最后，如果出現如上的圖示，就說明安裝成功了。
我們看一下生成好的目錄：
（3）安裝列表
我們看到根目錄下有個packge.json文件，打開瞧一瞧：
我們看到，需要安裝的東西還真不少。慢慢裝吧。輸入命令：
cd vue2
npm install
慢慢等着吧，如果你玩過node，這個流程應該是相當熟悉了。
（4）好，經過漫長的等待，我們終於將物料全部安裝完畢。然后呢，輸入命令：
npm run dev
我們看到，命令行進入阻塞等待狀態。
根據提示我們知道，8080端口已經被監聽了。打開瀏覽器，輸入http://localhost:8080,會看到這樣的頁面：
（5）目錄結構
build：打包發布需要的文件。 config：存放配置文件。 src：開發目錄。這個比較重要 |---assets：資源目錄。 |---components：存放組件，都是.vue文件。 |---router：路由文件。 |---App.vue:入口組件。 |---main.js:啟動文件。 static：靜態資源目錄。可以放一些圖片，字體之類。 index.html:首頁入口文件。 packge.json:安裝列表。
（4）打包輸出文件目錄
不知道大家注意到沒有，貌似還少了個目錄，是啥呢？
沒錯，就是dist打包輸出的文件目錄。這個目錄其實是動態生成的，我們輸入命令：
npm run build
然后就可以生成dist目錄了，我們最后上線，也只是上這個dist目錄即可。這個以后我們還會說
從package.json安裝清單來看，這個腳手架還搭載了express。那是否意味着：我們的api接口也會在上面開發呢？其實不然，你想多了。
這個node環境，不過是方便前端調試打包的工具罷了。
我們一向秉承的原則是——前后端分離。為了降低日后項目的維護成本，還是徹底分開的好。
.