Vue環境搭建以及相關工具安裝(超詳細)步驟


安裝Vue環境整整花了我半小時,但我還是用幾分鍾總結下來了,避免下次用個新電腦又得搭建環境浪費時間了,下面是我搭建環境的步驟,與君同享,共同學習,若有錯誤,歡迎吐槽評論! 
另外,我的電腦是win10系統。

一、NodeJS下載安裝

沒有學習過Node.js的同學很有疑問,這個下載的作用是什么?我們在學習vue.js時,不一定要是學過node.js的,我們需要的是NodeJS里npm工具,npm是NodeJS下的一個包管理工具,它可以很方便的幫你管理(可以簡單理解為下載)各類前端的框架或插件,類似於PHP的composer,Twitter 的 Bower 一樣。使用Vue不需要安裝NodeJS,這里下載NodeJS只是為了使用其內置的NPM工具,所以不需要你有任何的NodeJS基礎,只需要運行 npm install vue 命令,即可把 Vue 的最新版本下載至 node_modules 文件夾。我們可以去官網下載https://nodejs.org/zh-cn/download/      附安裝教程:http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

 

 

 

二、安裝vue-cli

vue-cli腳手架模板是基於node下的npm來完成安裝的所以首先需要安裝node,在安裝的過程中可以根據個人

喜好使用淘寶的鏡像,但是要先安裝cnpm(npm實際已經存在nodejs安裝文件中~~~所以上面第一步下載過nodejs的就可以跳過這個步驟了)

打開命令窗口(win+r),輸入命令:

npm install --global vue-cli

會出現下面這種效果

 

 然后用命令行“npm -v”或“node -v”查看安裝的版本號,以此來檢測是否安裝成功(第一步安裝nodejs的可以檢驗一下):

 

 

三、cnpm的安裝

安裝完node之后,npm包含的很多依賴包是部署在國外的,下載速度是超級慢。所以我們要安裝cnpm,cnpm是淘寶對npm的鏡像服務器,這樣依賴的包安裝起來就快多了。
安裝命令為:

npm install -g cnpm --registry=https://registry.npm.taobao.org

 

 

 

 

四、vue-cli的安裝(cnpm下再全局安裝vue-cli)

vue-cli是vue官方提供的一個命令行工具,可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置,帶來現代化的前端開發流程。只需一分鍾即可啟動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。
安裝命令為:cnpm install -g vue-cli,回車,等待安裝。

附更新版本命令: npm install -g vue-cli@3.0.4 ,@后為需要更新的版本號

 

 安裝完后,檢查是否安裝成功,輸入vue,出現以下提示表示安裝成功:

五、新建一個Vue項目

在nodejs目錄下新建一個項目文件夾,命名為 vue-demo,cd到此文件夾,輸入:vue init webpack vue-demo,回車之后等待下載依賴包(建議選擇網絡比較好的區域):

 

 

 

六、運行項目

在命令行里輸入 cnpm run dev,執行完成后啟動項目(輸入運行后給的地址),瀏覽器出現以下接結果,說明啟動成功。注意瀏覽器的版本,低版本的不支持哦

 到此就成功的配置好Vue環境了!

 


免責聲明!

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



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