NodeJS 與構(gòu)建 vue 項(xiàng)目

1. 安裝 nodeJs

我們想要新建 Vue 項(xiàng)目或者 React 項(xiàng)目的話,首先要下載 node.js,我們通過 node.js 來進(jìn)行項(xiàng)目構(gòu)建,node.js 的下載通過該網(wǎng)址進(jìn)行下載nodejs 中文網(wǎng).

安裝過程非常簡(jiǎn)單,選擇好安裝目錄,一直下一步就好了,環(huán)境變量 node 也會(huì)自己直接生成

卸載請(qǐng)看這里 卸載

安裝結(jié)束后,軟件結(jié)構(gòu)如圖所示

軟件結(jié)構(gòu)

接著我們進(jìn)入 Node.js command prompt 這個(gè)命令行中

進(jìn)入

這是命令行的界面

界面

1.1 驗(yàn)證軟件配置

我們首先驗(yàn)證一下軟件的配置對(duì)不對(duì)

1.1.1 驗(yàn)證 nodejs 版本號(hào)

驗(yàn)證 nodejs 版本號(hào),輸入代碼后回車:

所有帶美元符號(hào)的語(yǔ)句,在 windows 環(huán)境下都去除美元符號(hào)執(zhí)行

node -v

結(jié)果如圖所示

版本號(hào)

只要出現(xiàn)版本號(hào)信息,node 就沒問題

1.1.2 驗(yàn)證 npm 版本號(hào)

接著我們驗(yàn)證 npm 的版本號(hào)(新版 node 會(huì)自己附帶安裝 npm,但是保險(xiǎn)測(cè)試一下)

npm -v

結(jié)果如圖所示

npm版本號(hào)信息

那么我們的 nodejs 的安裝測(cè)試就結(jié)束了

1.2 更換 npm 的默認(rèn)地址

這步是一個(gè)可選項(xiàng),因?yàn)?node.js 的安裝可以指定安裝路徑,但是附帶的 npm 可不會(huì)哦,都給你整 c 盤里面了,所以把默認(rèn)的地址進(jìn)行更換一下(不過我 node 安裝的就是 c 盤,也無所謂了,需要的可以看下)

1.2.1 設(shè)置 npm 安裝程序時(shí)的默認(rèn)位置

請(qǐng)?zhí)崆?strong>把文件夾給新建好!!!!!!!

這個(gè)路徑就是默認(rèn)路徑,你想換到哪里就把路徑進(jìn)行更換

#默認(rèn)安裝位置
C:\Users\Default\AppData\Roaming\npm\node_modules
#自己選擇位置
#npm config set prefix "X:\Program Files\nodejs\node_global"
$ npm config set prefix "E:\Program Files\nodejs\node_global"

1.2.2 設(shè)置 npm 安裝程序時(shí)的緩存位置

這個(gè)路徑就是默認(rèn)緩存路徑,你想換到哪里就把路徑進(jìn)行更換

#默認(rèn)安裝位置
C:\Users\Default\AppData\Roaming\npm\node_cache
#自己選擇位置
#npm config set cache "X:\Program Files\nodejs\node_cache"
$ npm config set cache "E:\Program Files\nodejs\node_cache"

1.2.3 設(shè)置環(huán)境變量

文件夾地址根據(jù)需要自己定義,定義 npm 安裝程序時(shí)的默認(rèn)位置

變量名:NODE_PATH
#X:\Program Files\nodejs\node_global
變量值:X:\Program Files\nodejs\node_global

依葫蘆畫瓢,別依葫蘆畫葫蘆,根據(jù)自己的定義,變通一下

添加變量

把該變量添加到 path 中,如圖類似,依葫蘆畫瓢,別依葫蘆畫葫蘆,根據(jù)自己的定義,變通一下

path

1.3 更換淘寶鏡像

這步非常關(guān)鍵,因?yàn)槲覀兿胍獎(jiǎng)?chuàng)建 vue 項(xiàng)目,得通過 node 創(chuàng)建,但是 node 得擁有 vue 的環(huán)境,下載環(huán)境默認(rèn)通過國(guó)外的鏡像下載,網(wǎng)速太慢還不穩(wěn)定,我們添加國(guó)內(nèi)淘寶的鏡像下載支持,輸入下方代碼:

從這里到結(jié)束輸入的所有代碼::::::切記輸入代碼完成后,等待語(yǔ)句執(zhí)行完成后再操作,有些語(yǔ)句執(zhí)行后,開始會(huì)沒反應(yīng)

輸入完后回車:

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

輸入完后回車:

npm config set registry https://registry.npm.taobao.org

更換完成后,以后安裝依賴就可以把 npm 換成 npm 來調(diào)用國(guó)內(nèi)映像環(huán)境

2. 安裝 webpack 打包工具

先安裝 webpack,再安裝 webpack 的腳手架

2.1 webpack

npm install webpack -g

2.2 腳手架

npm install webpack-cli -g

測(cè)試在 cmd 中輸入以下命令

webpack -v

3. 安裝 vue 環(huán)境

這里是 vue 的官網(wǎng),vue 官網(wǎng)

3.1 安裝 vue 腳手架

vue 腳手架,官網(wǎng)地址.

輸入下方代碼后回車:

npm install -g @vue/cli

4. 安裝TypeScript

JavaScript的超集

npm install -g typescript

5. yarn 安裝

npm install -g yarn

4. 第一個(gè) vue 的應(yīng)用

我們有了這個(gè)快速開發(fā) vue 的腳手架應(yīng)用之后,我們就可以開始第一個(gè) vue 項(xiàng)目的搭建吧

我們有兩種方式選擇,一種是命令行方式,一種是圖形界面方式.

4.1 命令行方式

在你想要?jiǎng)?chuàng)建項(xiàng)目的文件夾中,shift+鼠標(biāo)右鍵打開命令行窗口

打開命令行

在命令行中輸入以下命令后回車執(zhí)行:

#my-project為項(xiàng)目名
vue create my-project

注意:有可能會(huì)報(bào)錯(cuò),可參考這篇文章: 文章

項(xiàng)目結(jié)構(gòu)如下圖所示:

項(xiàng)目結(jié)構(gòu)

這個(gè)時(shí)候我們進(jìn)入這個(gè)項(xiàng)目的文件夾中,shift+鼠標(biāo)右鍵打開命令窗口

輸入下方代碼,運(yùn)行項(xiàng)目

npm run serve

打開http://localhost:8080/地址進(jìn)行訪問測(cè)試

結(jié)果如圖所示:

效果

4.2 圖形界面方式

第二種方式,類似于我們?cè)趧?chuàng)建 SpringBoot 項(xiàng)目一樣,非常簡(jiǎn)單.

shift+鼠標(biāo)右鍵打開命令窗口

在窗口中輸入以下命令

#打開圖形界面
vue ui

效果如下:

圖形創(chuàng)建

效果2

這個(gè)太簡(jiǎn)單,自己鼓搗下都明白了,項(xiàng)目運(yùn)行方式同上同上同上

這篇文檔就到這里了,李俊逸敬上