本教程后面部分（用命令行創(chuàng)建基于vue3的uniapp項(xiàng)目+Webstorm配置uniapp）適合習(xí)慣使用vscode或Webstorm等（或者說(shuō)不習(xí)慣HBuilder X）的人參考，如果習(xí)慣使用HBuilder X，還是建議使用HBuilder X來(lái)搭建uniapp項(xiàng)目，會(huì)方便很多。

目錄

1. 配置node.js

1.1 下載并安裝

1.2 配置環(huán)境變量

1.3 修改安裝目錄

2. 使用命令行創(chuàng)建Vue3/Vite版的uniapp項(xiàng)目

2.1 全局安裝 vue-cli

2.2 創(chuàng)建uniapp項(xiàng)目模板

方法一：使用命令行創(chuàng)建模板

方法二：訪問(wèn)gitee下載模板

2.3 使用npm安裝相關(guān)依賴

3. Webstorm相關(guān)配置

3.1 使用Webstorm打開(kāi)項(xiàng)目并安裝插件

3.2 配置運(yùn)行程序（運(yùn)行到瀏覽器）

3.3 配置運(yùn)行程序（運(yùn)行到微信小程序）

3.4 其他運(yùn)行平臺(tái)

相關(guān)補(bǔ)充

#1. 設(shè)置點(diǎn)擊運(yùn)行后自動(dòng)打開(kāi)瀏覽器

#2.安裝scss模塊

1. 配置node.js

1.1 下載并安裝

進(jìn)入官網(wǎng)下載node.js，我這里下載的是最新版本的nodejs

下載完成后打開(kāi)，點(diǎn)擊next

點(diǎn)擊next

選擇安裝的目錄（建議放在其他盤上，我這里只有c盤），然后點(diǎn)擊next

繼續(xù)點(diǎn)擊next

繼續(xù)點(diǎn)擊next

點(diǎn)擊install

完成后點(diǎn)擊finish

1.2 配置環(huán)境變量

找到剛剛安裝的nodejs的目錄，ctrl+c復(fù)制路徑，并分別創(chuàng)建名為node_global和node_cache的兩個(gè)文件夾

win+r，然后輸入sysdm.cpl，回車

點(diǎn)擊高級(jí)→環(huán)境變量

選擇系統(tǒng)變量中的Path，然后編輯

點(diǎn)擊新建，然后ctrl+v粘貼剛剛復(fù)制的nodejs的路徑，再點(diǎn)擊新建，把node_global文件夾的路徑也加進(jìn)去，然后點(diǎn)擊確定

按win鍵，然后搜索cmd，點(diǎn)擊以管理員身份運(yùn)行

輸入 node -v 和 npm -v，沒(méi)有報(bào)錯(cuò)則安裝成功

1.3 修改安裝目錄

打開(kāi)cmd，分別輸入npm config set prefix <你的node_global文件夾的路徑> 和 npm config set cache <你的node_cache文件夾的路徑>

例如：

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

2. 使用命令行創(chuàng)建Vue3/Vite版的uniapp項(xiàng)目

2.1 全局安裝 vue-cli

管理員身份打開(kāi)cmd，輸入

npm install -g @vue/cli

等待一段時(shí)間后，安裝成功

2.2 創(chuàng)建uniapp項(xiàng)目模板

方法一：使用命令行創(chuàng)建模板

管理員身份打開(kāi)cmd，進(jìn)入到需要?jiǎng)?chuàng)建的目錄

在命令行中輸入

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

其中最后的my-vue3-project是項(xiàng)目的名字，可以自己指定。

回車后，會(huì)出現(xiàn)“Ok to proceed?”，輸入y，然后回車

顯示cloned dcloudio/uni-preset-vue#vite to my-vue3-project表明創(chuàng)建成功

方法二：訪問(wèn)gitee下載模板

有些人會(huì)出現(xiàn)創(chuàng)建失敗的情況

這時(shí)可以直接訪問(wèn)gitee下載模板

解壓到項(xiàng)目目錄

然后自己修改項(xiàng)目名，我這里就改成一樣的“my-vue3-project”這個(gè)名字

2.3 使用npm安裝相關(guān)依賴

通過(guò)方式一或者方式二將模板創(chuàng)建成功后，管理員打開(kāi)cmd，進(jìn)入到項(xiàng)目目錄

接下來(lái)輸入

npm install

等待一段時(shí)間，安裝完成

到這里就可以使用自己的編輯器打開(kāi)項(xiàng)目運(yùn)行了，接下來(lái)我就以Webstorm為例，并做一些相關(guān)配置，使用vscode的話可以自行配置。

3. Webstorm相關(guān)配置

3.1 使用Webstorm打開(kāi)項(xiàng)目并安裝插件

安裝插件之后，對(duì)uniapp相關(guān)的代碼提示會(huì)更好，如果不想安裝可以直接跳過(guò)這個(gè)步驟，直接進(jìn)行運(yùn)行程序的配置

File→Open

找到之前創(chuàng)建的項(xiàng)目，點(diǎn)擊OK就行了。這里我已經(jīng)打開(kāi)了

Webstorm中進(jìn)入Settings→Plugins→Marketplace，搜索uniapp，安裝并啟用插件，最后再點(diǎn)擊OK（一定要點(diǎn)OK，不然可能會(huì)失?。?/p>

3.2 配置運(yùn)行程序（運(yùn)行到瀏覽器）

點(diǎn)擊Current File→Edit Configurations，進(jìn)入到Run/Debug Configurations頁(yè)面

點(diǎn)擊添加，選擇npm

Name處可以自己取名字，Scripts處選擇dev:h5，最后點(diǎn)擊OK

現(xiàn)在可以選擇我們剛剛的配置，然后點(diǎn)擊啟動(dòng)按鈕就可以運(yùn)行了

點(diǎn)擊local后面的url，就能進(jìn)入了

3.3 配置運(yùn)行程序（運(yùn)行到微信小程序）

script處選擇dev:mp-weixin，然后點(diǎn)擊OK

點(diǎn)擊啟動(dòng)按鈕之后，項(xiàng)目中會(huì)生成一個(gè)dist文件夾，找到mp-weixin文件夾右鍵復(fù)制文件夾的絕對(duì)路徑

接下來(lái)打開(kāi)微信開(kāi)發(fā)者工具，點(diǎn)擊導(dǎo)入 （沒(méi)有微信開(kāi)發(fā)者工具的可以去官網(wǎng)下載，然后自行安裝）

把剛剛復(fù)制的mp-weixin文件夾的絕對(duì)路徑粘進(jìn)去，回車，然后點(diǎn)擊選擇文件夾

我這里選擇的游客模式，所以AppID是touristappid，大家可以登錄賬號(hào)，然后去官網(wǎng)獲取正式的appid

接下來(lái)點(diǎn)擊“信任并運(yùn)行”，然后再點(diǎn)擊編譯

完成，這個(gè)只需導(dǎo)入一次，后面在運(yùn)行時(shí)，只要打開(kāi)微信開(kāi)發(fā)者工具進(jìn)入項(xiàng)目，就會(huì)自動(dòng)編譯

3.4 其他運(yùn)行平臺(tái)

一般的話就使用瀏覽器和微信小程序來(lái)運(yùn)行，如果需要其他的運(yùn)行方式，可以根據(jù)下面的參數(shù)照著我上面的步驟創(chuàng)建運(yùn)行配置

平常調(diào)試代碼就選擇 dev: ，項(xiàng)目完成后打包發(fā)布選擇 build:

后面的值對(duì)應(yīng)的平臺(tái)如下，這里我介紹了幾個(gè)，詳細(xì)請(qǐng)看官方文檔

至此，相關(guān)配置已經(jīng)完成，后面如果需要云打包的話，可以下載HBuilder X，然后使用HBuilder X打開(kāi)項(xiàng)目，直接云打包即可。

相關(guān)補(bǔ)充

#1. 設(shè)置點(diǎn)擊運(yùn)行后自動(dòng)打開(kāi)瀏覽器

進(jìn)入到Run/Debug Configurations頁(yè)面，選擇之前配置的“運(yùn)行到瀏覽器”，在Before launch下點(diǎn)擊加號(hào)，選擇Launch Web Browser

第一個(gè)可以選擇運(yùn)行的瀏覽器，我這里選的是Edge

第二個(gè)要填運(yùn)行的url，填之前運(yùn)行時(shí)local后面的url

點(diǎn)擊OK之后再次運(yùn)行，就會(huì)自動(dòng)打開(kāi)瀏覽器

#2.安裝scss模塊

如果需要scss模塊的話，可以使用管理員身份啟動(dòng)命令行，進(jìn)入項(xiàng)目目錄，輸入

npm install sass

安裝完成

現(xiàn)在使用scss，運(yùn)行成功文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-828320.html

到了這里，關(guān)于保姆級(jí)教程 從零配置nodejs環(huán)境并用命令行創(chuàng)建基于vue3的uniapp項(xiàng)目+Webstorm配置uniapp的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！