一、Vue.js簡介以及搭建前期準備工作
Vue.js 是一套構建用戶界面的漸進式框架，搭建前期首先系統需要安裝Node.js，npm（Node.js打包工具），Git代碼管理工具。Node.js與Git安裝可以參考這篇博客Node.js啓程之旅（一）之安裝和檢查，npm會跟隨Node.js下載。
我在安裝過程中參考的是Vue.js官方安裝文檔與菜鳥教程Vue.js安裝，還有慕課網vue.js入門基礎課程。下面的框架搭建基於官方文檔提供的命令行工具Vue CLI，命令行的命令參考菜鳥教程。
Vue 提供了一個官方的 CLI，爲單頁面應用 (SPA) 快速搭建繁雜的腳手架。它爲現代前端工作流提供了 batteries-included 的構建設置。只需要幾分鐘的時間就可以運行起來並帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 Vue CLI 的文檔
二、npm更換淘寶鏡像+Vue Devtools插件安裝
將npm更換淘寶鏡像cnpm，下載速度會加快，命令行輸入以下命令，安裝成功後輸入cnpm -v可以查看版本號。
注意：此處用管理員身份打開Git Bash，再輸入相應命令，不然可能會出現一些權限的錯誤。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm -v
在使用 Vue 時，推薦在瀏覽器上安裝 Vue Devtools。它允許你在一個更友好的界面中審查和調試 Vue 應用。在這裏介紹下Chrome下安裝Vue Devtools以及使用。
下載Chrome插件的github地址：https://github.com/vuejs/vue-devtools#vue-devtools
插件下載安裝成功後可以在右上角看見V的圖標
啓動一個Vue.js應用，在Chrome瀏覽器下右鍵檢查，最後一欄有Vue標籤，點開即可在瀏覽器中對Vue元素進行查看與調試。
三、Vue.js框架搭建基於命令行工具
1.首先全局安裝vue-cli
$ cnpm install -g vue-cli
2.創建一個基於 webpack 模板的新項目
$ vue init webpack my-project
這裏需要進行一些配置，vue-router爲路由配置，ESLint爲一個代碼規範檢查工具，unit test爲單元測試，e2e test也爲一個測試，根據項目實際情況進行選擇。
3.項目創建成功，根據提示啓動項目
根據提示輸入一下命令啓動項目
cd my-project
npm run dev
項目啓動成功後界面如下，根據提示輸入地址即可查看
至此Vue.js框架搭建成功，下一步可以用Webstrom打開該項目查看目錄
四、Webstorm快速啓動Vue項目配置
Webstorm爲JetBrains公司下專注前端開發的IDE，具有強大的集成功能，首先將該項目打開，看一下項目目錄，基本我們需要開發的目錄即爲src下的文件：APP.vue文件引入組件，components組件目錄，以及index.js設置默認組件渲染文件。
由於項目的啓動命令爲npm run dev，所以在Webstorm啓動項目可以選擇在終端輸入命令，Webstorm調用終端可以使用快捷鍵：Alt+F12，或者在View菜單手動調用。
終端啓動成功界面如圖所示
配置快速啓動會比命令行更加便捷，所以在右上角添加npm配置。
配置完成後，點擊綠色小三角即可啓動項目。
可以看到終端項目在啓動，啓動成功後單擊終端的地址或者在瀏覽器輸入地址即可查看。
好了，我終於寫完了，真的好多的，希望有些用處，Bye~