vuejs開發環境搭建及熱更新


 

推薦使用官方提供的命令行工具,可用於快速搭建大型單頁應用。只需一分鍾即可啟動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置項目。

1、安裝node  https://nodejs.org/en/

由於有些npm有些資源被屏蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,所有我還需要npm的國內鏡像---cnpm。
在命令行中輸入:npm install -g cnpm --registry=https://registry.npm.taobao.org回車,大約需要2分鍾,如果報錯或沒反應,則卸掉node.js重新安裝

2、安裝Git  https://git-scm.com/download/win

 

3、安裝全局vue-cli腳手架,用於幫助搭建所需的模板框架。

  輸入命令:cnpm install -g vue-cli回車等待完成  -g是全局安裝的意思

 

4、創建項目

首先我們要選定目錄,然后在命令行中把目錄轉到選定的目錄,
假如我們打算把項目新建在e盤下的vue文件夾中則輸入下面的命令:e:回車,然后cd vue,
然后輸入命令:vue init webpack 項目文件夾名稱,回車,
運行初始化命令的時候會讓用戶輸入幾個基本的選項,如項目名稱,描述,作者等信息,如果不想填直接回車默認就好。(一頓回車+N鍵就完成了)

如果出現下面問題說明nodejs版本過低,ES6的語法還不能支持,所以需要重新安裝高版本nodejs


5、安裝項目所需的依賴包
首先輸入:cd 項目名回車,然后輸入:cnpm install回車等待安裝,
安裝完成之后,會在我們的項目目錄firstVue文件夾中多出一個node_modules文件夾,這里邊就是我們項目需要的依賴包資源。安裝完依賴包之后,就可以運行整個項目了。
6、測試環境是否搭建成功
在cmd里輸入:cnpm run dev回車,項目運行成功后,瀏覽器會自動打開localhost:8080(如果瀏覽器沒有自動打開,可以手動輸入)。運行成功后,會看到Welcome to Your Vue.js App頁面。


  

 
       


免責聲明!

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



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