准備了以下的工具進行安裝本地開發環境:
- 代碼編輯器×1【本人使用VSCode 1.11】
- Nodejs安裝包×1【必須】(官網下6.10.x的就行了)
- 正常使用的Windows電腦一台(推薦Win7及以上電腦進行開發,最推薦Win10)
本文使用Powershell,cmd也可以的。
一、對於第一次使用Vue的Windows用戶【搭建本地開發環境】
第一步,一路下一步安裝Nodejs;
第二步,打開cmd或者WindowsPowershell或者Git命令行,用npm安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
第三步,用cnpm或者npm按照vue官網的資料安裝vue
cnpm install vue
第四步,用cnpm或者npm安裝打包工具(就是Web開發工程的打包工具)——webpack
cnpm install webpack -g
第五步,在准備創建工程的同級目錄下安裝vue-cli(推薦cnpm)
cnpm install --global vue-cli
以上為環境搭建。
二、創建Vue工程
第一步,用vue創建一個工程,在Windows會是一個文件夾的形式
vue init webpack 工程名
這里看下圖,Powershell實際操作截圖,有的細節以后補充。
第二步,cnpm或npm(在工程目錄下)執行install,安裝其他依賴
cnpm install
如下圖最后兩行。
漫長的刷屏和等待。
最終會部署65個包。
第三步,啟動vue工程(cnpm或者npm run dev命令)
這里顯示用了19.3秒,就會自動彈出瀏覽器頁面(停止就關掉Powershell或者ControlC就行了,下次加載可以用IIS加載工程目錄):
這個時候就可以用VSCode編輯整個工程了:
關於VSCode,可能需要安裝一些支持Vue的插件(點我),希望微軟爸爸以后能原生支持Vue吧。