Vuejs環境安裝與工程建立【小白Windows向】


准備了以下的工具進行安裝本地開發環境:

  • 代碼編輯器×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吧。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM