一、node.js安裝以及環(huán)境配置

1、下載vue.js

下載地址：

https://nodejs.org/en/

2、安裝node.js

下載完成后，雙擊安裝包開(kāi)始安裝。安裝地址最好換成自己指定的地址。

這一步根據(jù)自己的需要進(jìn)行選擇，我這里就選的是第一個(gè)。網(wǎng)上有些教程說(shuō)要選中第4個(gè)，我這里是要后期需要更換全局模塊所在的路徑，以及緩存cache的路徑的，所以在后期需要自己重新配置環(huán)境變量。

這一步我沒(méi)選，直接進(jìn)行下一步，一直下一步，剩下的都是安裝了。

安裝完成之后，node啟動(dòng)程序會(huì)自動(dòng)添加到系統(tǒng)環(huán)境變量path中，這里可自行去查看。

3、檢查node程序是否安裝成功

打開(kāi)cmd窗口輸入node -v 和 npm -v查看node版本和npm版本。如果版本號(hào)都能出來(lái)，代表安裝成功了

在默認(rèn)下載全局包時(shí)，這個(gè)包的路徑是放在我c盤下面的，大家可以輸入指令 npm root -g 進(jìn)行查看，我這里已經(jīng)更換了目錄，所以不在c盤。接下里就來(lái)教大家如何更改

4、更改默認(rèn)路徑

這里主要是配置的是npm安裝的全局模塊所在的路徑，以及緩存cache的路徑。因?yàn)橐院笤趫?zhí)行類似：npm install express [-g] 的安裝語(yǔ)句時(shí)，會(huì)將安裝的模塊安裝到C盤的路徑中，占用C盤空間，所以才進(jìn)行的配置，如果C盤容量足夠，可省略這一步，不影響node使用。

打開(kāi)自己剛剛安裝的node目錄

在目錄下新建兩個(gè)文件夾【node_global】和【node_cache 】文件夾

再次再次打開(kāi)cmd命令窗口，輸入npm config set prefix “你的路徑\node_global”（你的路徑”默認(rèn)安裝的情況下為 C:\Program Files\nodejs）

npm config set cache “你的路徑\node_cache” 可直接復(fù)制剛剛新建的空文件夾目錄

這里記住了兩次的命令是不一樣的一個(gè)是 set prefix 一個(gè)是 sex cache ，大家不要為了省事兩次都直接復(fù)制粘貼成同一個(gè)了

5、添加環(huán)境變量

點(diǎn)擊下面系統(tǒng)變量里的新建按鈕，添加變量名和變量值然后點(diǎn)擊確定

“變量名”欄填寫(xiě)：NODE_PATH（要大寫(xiě)，HOME前有下劃線）

“變量值”欄填寫(xiě)：D:\nodejs\node_global\node_modules （node的安裝地址）

找到系統(tǒng)變量中的Path然后點(diǎn)擊編輯，新建兩個(gè)變量，然后確定。第一個(gè)是node_global文件夾目錄，第二是node安裝目錄

5、測(cè)試安裝是否成功

根據(jù)步驟3：打開(kāi)cmd輸入node -v 和 npm -v 查看是否有版本號(hào)出現(xiàn)。以及輸入命令： npm root -g 查看全局模塊的默認(rèn)路徑是否已經(jīng)改變。這里不過(guò)多的介紹了。

二、安裝vue-cli腳手架

1、檢查node環(huán)境是否安裝好

打開(kāi)cmd輸入node -v 和 npm -v，如果能出現(xiàn)版本號(hào)，說(shuō)明安裝成功，安裝成功才能進(jìn)行下一步。

2、更改淘寶鏡像下定制的cnpm(gzip 壓縮支持) 命令行工具代替默認(rèn)的npm

打開(kāi)cmd輸入如下命令：

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

如果安裝失敗，可以使用命令 ：npm cache clean --force 強(qiáng)制執(zhí)行清理緩存，然后再重新安裝。

安裝完成之后打開(kāi)cmd 輸入cnpm -v 查看是否安裝成功，如果出現(xiàn)版本號(hào)代表安裝成功

3、開(kāi)始安裝vue-cli

打開(kāi)cmd輸入如下指令安裝vue-cli

cnpm install -g vue-cli

最新的vue項(xiàng)目模塊中，都帶有webpack插件，所以這里就可以不安裝webpack插件。安裝完成后，可以使用 vue -V（注意V大寫(xiě)）查看是否安裝成功

如果出現(xiàn)版本號(hào)，則代表安裝成功，如果提示“無(wú)法識(shí)別 vue”，可以是npm版本過(guò)低，可以使用 npm install -g npm 來(lái)更新版本

4、生成項(xiàng)目

首先需要再命令行中進(jìn)入到項(xiàng)目目錄，然后輸入：

vue init webpack demo1

其中webpack是面板名稱，demo1是自定義項(xiàng)目名稱，命令執(zhí)行之后，會(huì)在當(dāng)前目錄生成以該名稱命名的項(xiàng)目文件夾。配置完成后，可以看到目錄下多出了一個(gè)項(xiàng)目文件夾，里面就是 vue-cli 創(chuàng)建的一個(gè)基于 webpack 的 vue.js 項(xiàng)目

然后進(jìn)入項(xiàng)目目錄（cd Vue-Project），使用 cnpm 安裝依賴(注意要在有package.json 的目標(biāo)下運(yùn)行)

cnpm install

然后啟動(dòng)項(xiàng)目（直接訪問(wèn)端口號(hào)進(jìn)入測(cè)試demo1）

npm run dev

然后打開(kāi)瀏覽器進(jìn)入 localhost:8080，如果出現(xiàn)頁(yè)面則項(xiàng)目啟動(dòng)成功。如果沒(méi)有加載出頁(yè)面，可能是本地8080端口被占用，需要修改一下配置文件 config>index.js

5、打包上線

自己的項(xiàng)目文件都需要放在src文件夾下，項(xiàng)目開(kāi)發(fā)完成之后可以輸入如下命令來(lái)進(jìn)行打包工作。

npm run build

打包完成后，會(huì)生成 dist 文件夾，如果已經(jīng)修改了文件路徑，可以打開(kāi)本地文件查看，項(xiàng)目上線時(shí)，只需要將 dist 文件夾放到服務(wù)器就行了。

總結(jié)

到此這篇關(guān)于node.js與vue cli腳手架下載安裝配置方法的文章就介紹到這了,更多相關(guān)node.js vue cli腳手架下載安裝配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論