1、安裝node.js

從node.js官網(wǎng)下載并安裝node，安裝過程很簡(jiǎn)單，一路“下一步”就可以了（傻瓜式安裝）。安裝完成之后，打開命令行工具(win+r，然后輸入cmd)，輸入 node -v，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。

2、查看npm

安裝好node.js，就已自帶npm（包管理工具）打開命令行工具(win+r，然后輸入cmd)，輸入 npm -v 命令查看npm是否安裝成功。

3、安裝npm的國(guó)內(nèi)鏡像—cnpm

在命令行中輸入npm install -g cnpm –registry=http://registry.npm.taobao.org,安裝完成之后可以使用cnpm -v命令查看是否安裝成功，如果輸出版本號(hào)即安裝成功。

4、安裝webpack（一款開源的前端打包工具）

打開命令行工具輸入：cnpm install webpack -g

5、查看webpack是否安裝成功

安裝完成之后輸入 webpack -v，如果出現(xiàn)xxx not installed,則需要執(zhí)行對(duì)應(yīng)指令，如下圖，就執(zhí)行命令cnpm install webpack -D和cnpm install webpack-dev-server -D

如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。

6、安裝vue-cli腳手架構(gòu)建工具

打開命令行工具輸入：cnpm install vue-cli -g，安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。

7、創(chuàng)建Vue項(xiàng)目

打開命令行工具，進(jìn)入相應(yīng)的文件夾路徑下，執(zhí)行命令vue init webpack vueDemo（自己的項(xiàng)目名）

補(bǔ)充：vue-cli Failed to download repo vuejs-templates/webpack連接超時(shí)解決辦法

在我配置完nmp、node.js、vue-cli環(huán)境，準(zhǔn)備創(chuàng)建項(xiàng)目進(jìn)行最后一步的測(cè)試的時(shí)候Vue init webpack 項(xiàng)目名 總是失敗，都是報(bào)這個(gè)錯(cuò)，原因是因?yàn)闊o(wú)法連接外網(wǎng)或者連接超時(shí)導(dǎo)致

經(jīng)過查閱資料，記錄下自己的錯(cuò)誤。

解決的辦法是使用離線下載，我們需要下載github倉(cāng)庫(kù)中的vue-templates/webpack，然后解壓到本地。：

需要手動(dòng)下載 webpack-simple 模板，進(jìn)入鏈接https://github.com/vuejs-templates/webpack

下載到我們的c盤用戶目錄下，自己創(chuàng)建的 .vue-templates文件夾，解壓到當(dāng)前文件夾，并且命名為webpack

再進(jìn)行vue init webpack vuedemo命令的時(shí)候，需要帶上參數(shù)--offline表示離線初始化。這樣就能成功創(chuàng)建了，接下來(lái)就是創(chuàng)建項(xiàng)目的參數(shù)了。

最后創(chuàng)建完，npm run dev啟動(dòng)項(xiàng)目，在瀏覽器輸入http://localhost:8080/測(cè)試一下，成功

總結(jié)

到此這篇關(guān)于Vue安裝與環(huán)境配置步驟的文章就介紹到這了,更多相關(guān)Vue安裝與環(huán)境配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論