Vue環(huán)境的搭建

?

一.???? 背景

vue的運(yùn)行方式有兩種

一種是在頁面引用vue的js包,

一種是搭建腳手架來vue框架.

我們?cè)谶@里使用的是第二種方式. 需要安裝的軟件 npm 16.13.1 LTS

現(xiàn)在最新版已經(jīng)20了， 建議下載LTSC版

下載地址:

https://nodejs.org/en/

?

二.???? 安裝Node.js

點(diǎn)擊node-v16.13.1-x64.msi,開始安裝

?

在Welcome to the Node.js Setup Wizard 頁面點(diǎn)擊Next.

?

?

在”End-User License Agreement”點(diǎn)擊”I accept the terms in the License Agreement”, 然后點(diǎn)擊Next.

?

?

在”Destination Folder”頁面選擇安裝路徑, 這里是默認(rèn), 這個(gè)路勁要記住, 然后點(diǎn)擊Next

?

在Custom Setup, 我這里選擇默認(rèn), 然后點(diǎn)擊Next

?

?

在Tools for Native Modules頁面,勾選復(fù)選框,然后點(diǎn)擊Next

?

在Ready to install Node.js頁面點(diǎn)擊Install進(jìn)行安裝

?

?

等待Node.js安裝完成, 然后點(diǎn)擊Finish

?

?

點(diǎn)擊Finish之后會(huì)彈出一個(gè)新的CMD窗口, Install Additional Tools for Node.js, 點(diǎn)擊任意鍵繼續(xù)

?

?

點(diǎn)擊任意鍵繼續(xù)

?

?

等待Windows PowerShell執(zhí)行完成, 按鍵盤回車鍵退出

?

?

三.???? 在NPM中安裝插件

1.?? 配置NPM

首先,先確認(rèn)NPM安裝完成,,以管理員身份打開CMD.然后在CMD窗口查看npm版本號(hào)

命令 cd C:\Program Files\nodejs

命令 node -v

命令 npm -v

?

?

?

修改npm的本地倉庫：

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

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

查看是否配置成功

npm list –global

如果報(bào)錯(cuò)如下, 請(qǐng)新建的目錄后再次,

?

?

如果顯示Empty,,就證明配置沒有問題

?

?

配置NPM的鏡像

由于國(guó)內(nèi)訪問NPM的鏡像緩慢,這里我們使用了淘寶NPM的鏡像

命令 npm config set registry=https://registry.npm.taobao.org

?

檢查是否配置正確

命令：npm config list

?

安裝npm更新到到global目錄下

命令：npm install npm –g

命令?Run npm install -g npm@8.2.0 to update 這個(gè)直接安裝舊的版本，避免4048錯(cuò)誤

（更新， 新版的安裝后可能會(huì)遇到4048的問題，在啟動(dòng)Vue的時(shí)候無法啟動(dòng)， 那么可以直接安裝舊的版本）

??

?

2.?? 配置VUE

配置系統(tǒng)變量,方便在CMD在任何目錄可以直接運(yùn)行vue的命令

?

在桌面或者文件資源管理器,右擊此電腦,點(diǎn)擊屬性

?

?

在系統(tǒng)頁面中, 點(diǎn)擊高級(jí)系統(tǒng)設(shè)置

?

在系統(tǒng)屬性中,點(diǎn)擊環(huán)境變量

?

在系統(tǒng)變量下, 點(diǎn)擊Path

?

點(diǎn)擊新建， 然后添加記錄 C:\Program Files\nodejs\node_modules 和C:\Program Files\nodejs\node_global ，然后點(diǎn)確定

?

?

在NPM中配置vue,

命令 : npm install vue -g

?

配置vue-router

命令: npm install vue-router -g

?

?

安裝vue腳手架

命令 : npm install vue-cli –g

?

?

檢查vue是否安裝成功

命令: vue? -V

?

? 注意，如果是安裝了舊的版本，那么截圖就和這個(gè)不一樣，

?

3.?? 創(chuàng)建vue2.0項(xiàng)目

（如果在新下載的代碼，也需要如此操作）

在E盤根目錄下創(chuàng)建一個(gè)叫vueDome的項(xiàng)目。

?

剛開始，E盤下是個(gè)空文件夾

?

?

打開CMD, 執(zhí)行命令vue init webpack vueDome

?

?

確認(rèn)項(xiàng)目名稱, 如果名稱沒問題,可以直接按回車鍵

?

名稱校驗(yàn)失敗,需要手動(dòng)輸入名稱(注意名稱里面不能有大小寫)

?

?

下面的可以直接選擇默認(rèn)

?

都填寫完成(藍(lán)色的文字都是選擇的文字)

然后開始加載項(xiàng)目文件

注意, 首次運(yùn)行加載項(xiàng)目會(huì)安裝依賴(如下圖)

?

?

項(xiàng)目加載完成, 出現(xiàn)下面的內(nèi)容

?

項(xiàng)目生產(chǎn)完畢后文件夾下會(huì)多出好多文件

?

?

?

?

進(jìn)入項(xiàng)目

?

?

運(yùn)行Dev項(xiàng)目

?

?

?

?

如果npm run dev 發(fā)生錯(cuò)誤，錯(cuò)誤如下圖

新版本的webpack?的BUG，解決方法就是卸載新版本，安裝老版本。

命令如下：

npm remove webpack-dev-server

npm install webpack-dev-server@2.9.1

?npm run dev

?

?

?

等cmd執(zhí)行完成,顯示出下面的這個(gè)頁面. 就可以在瀏覽器里打開連接了,此時(shí),這個(gè)窗體不能關(guān)閉

?

?

4. Vue的常見問題

4.1.安裝依賴的時(shí)候遇到4048錯(cuò)誤

截圖如下

?

?

解決方法:

1. 刪除C:\Users\{賬戶}\下的.npmrc文件
2. 執(zhí)行 npm cache clean –force
3. 在項(xiàng)目中把node_modules文件夾和package-lock.json文件刪除?
4. 重新執(zhí)行npm install命令安裝依賴

?

四.???? 升級(jí)到Vue3.X

1.?? 升級(jí)腳手架

卸載舊版腳手架

命令: npm uninstall vue-cli -g

?

?

安裝新版本Vue升級(jí)包

命令: npm install -g @vue/cli

?

2.?? Vue 3的常用命令

創(chuàng)建項(xiàng)目 vue create [項(xiàng)目名稱]

安裝依賴 vue install

啟動(dòng)項(xiàng)目 vue run serve

打包 npm run build

?

3.?? 運(yùn)行Vue項(xiàng)目

3.1.? 打開CMD跳轉(zhuǎn)到項(xiàng)目的路徑

3.2.? 安裝依賴vue install

3.3.? 啟動(dòng)項(xiàng)目 vue run serve

五.???? Net 5 Web API 的發(fā)布

1.?? 環(huán)境配置

1.1.????? 安裝IIS(不需要重啟)

1. 在服務(wù)器儀表盤點(diǎn)擊添加角色和功能

?

1. 開始之前 頁面點(diǎn)擊下一步

?

1. 安裝類型選擇默認(rèn)(基于角色或功能的安裝), 點(diǎn)擊下一步

?

1. 服務(wù)器選擇,選擇對(duì)應(yīng)的服務(wù)器,點(diǎn)擊下一步

?

1. 選擇服務(wù)器角色, 勾選IIS, 選擇對(duì)應(yīng)的服務(wù)和依賴

?

1. 選擇功能頁面, 選擇需要的組件, 點(diǎn)擊安裝

?

?

IIS安裝完成

1.2.????? 安裝Net5的運(yùn)行時(shí)(不需要重啟)

1. 首先,打開IIS,打開主頁的模塊,檢查模塊中是否有AspNetCoreModuleV2,如果有, 請(qǐng)忽略1.2這一步, 直接到1.3

?

?

1. 如下圖, 在我們演示的服務(wù)器中沒有AspNetCoreModuleV2模塊,那么我們就需要安裝Net 5的運(yùn)行環(huán)境

?

1. 下載依賴包并安裝

https://download.visualstudio.microsoft.com/download/pr/52a19242-a21c-421b-97d4-e69d70e802c5/db47df274b9c64ea2e22f90983e0e946/aspnetcore-runtime-5.0.14-win-x64.exe

?

https://download.visualstudio.microsoft.com/download/pr/1055020b-9c1a-4fd1-bb3e-64de0de2ee65/fbb705491eaea5fd9137de9fd230bbba/dotnet-sdk-5.0.405-win-x64.exe

?

?

?

?

1. 3
2. 5
3. 6
4. 45
5. 4
6. 5
7. ?

?

?

2.?? 打包

2.1.? 右擊項(xiàng)目名稱,點(diǎn)擊發(fā)布, 選擇文件系統(tǒng).

?

?

3.?? 發(fā)布到IIS

3.1.? 將發(fā)布的文件復(fù)制到服務(wù)器下

?

3.2.? 將WMSAPI.Core.Repository.dll和WMSAPI.Core.Service.dll也拷貝到服務(wù)器下

(因?yàn)轫?xiàng)目已經(jīng)解耦,編譯WMSAPIManage不會(huì)自動(dòng)生成倉儲(chǔ)實(shí)現(xiàn)層和服務(wù)實(shí)現(xiàn)層的dll, 需要右擊這兩個(gè)項(xiàng)目名點(diǎn)擊重新生成,然后找到這兩個(gè)dll復(fù)制到服務(wù)器上)

?

3.3.? 安裝Net5的運(yùn)行時(shí)和依賴

https://download.visualstudio.microsoft.com/download/pr/1055020b-9c1a-4fd1-bb3e-64de0de2ee65/fbb705491eaea5fd9137de9fd230bbba/dotnet-sdk-5.0.405-win-x64.exe

?

https://download.visualstudio.microsoft.com/download/pr/52a19242-a21c-421b-97d4-e69d70e802c5/db47df274b9c64ea2e22f90983e0e946/aspnetcore-runtime-5.0.14-win-x64.exe

?

3.4.? 檢查IIS的模塊是否包含AspNetCoreModule, 如果有這個(gè)模塊就沒有問題

?

?

3.5.? 在IIS配置程序運(yùn)行池

?

?

3.6.? 在IIS中發(fā)布

?

3.7.? 測(cè)試

?

?

4.?? 遇到的問題

問題: 默認(rèn)情況下, IIS會(huì)攔截Put和Delete請(qǐng)求,以至于Put和Delete在請(qǐng)求的時(shí)候會(huì)返回405錯(cuò)誤或者500錯(cuò)誤.

原因分析：在默認(rèn)情況下，IIS會(huì)安裝一個(gè)WebDav模塊，而這個(gè)模塊阻止了HTTP的PUT和Delete請(qǐng)求。

解決方案: 刪除IIS安裝的WebDav模塊，選擇你的項(xiàng)目，右邊有個(gè)“模塊”，雙擊它；找到WebDavModule，刪除它。

?

六.???? Vue的打包發(fā)布

1.?? 打包Vue

1. 如果項(xiàng)目正在運(yùn)行, 請(qǐng)先停止運(yùn)行項(xiàng)目

?

1. 運(yùn)行命令進(jìn)行編譯和打包npm run build

?

2.?? 部署到nginx

3.?? 部署到IIS

?