安裝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環境了!