Vue環境的搭建

?

一.???? 背景

vue的運行方式有兩種

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

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

我們在這里使用的是第二種方式. 需要安裝的軟件 npm 16.13.1 LTS

現在最新版已經20了， 建議下載LTSC版

下載地址:

https://nodejs.org/en/

?

二.???? 安裝Node.js

點擊node-v16.13.1-x64.msi,開始安裝

?

在Welcome to the Node.js Setup Wizard 頁面點擊Next.

?

?

在”End-User License Agreement”點擊”I accept the terms in the License Agreement”, 然后點擊Next.

?

?

在”Destination Folder”頁面選擇安裝路徑, 這里是默認, 這個路勁要記住, 然后點擊Next

?

在Custom Setup, 我這里選擇默認, 然后點擊Next

?

?

在Tools for Native Modules頁面,勾選復選框,然后點擊Next

?

在Ready to install Node.js頁面點擊Install進行安裝

?

?

等待Node.js安裝完成, 然后點擊Finish

?

?

點擊Finish之后會彈出一個新的CMD窗口, Install Additional Tools for Node.js, 點擊任意鍵繼續

?

?

點擊任意鍵繼續

?

?

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

?

?

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

1.?? 配置NPM

首先,先確認NPM安裝完成,,以管理員身份打開CMD.然后在CMD窗口查看npm版本號

命令 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

如果報錯如下, 請新建的目錄后再次,

?

?

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

?

?

配置NPM的鏡像

由于國內訪問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 這個直接安裝舊的版本，避免4048錯誤

（更新， 新版的安裝后可能會遇到4048的問題，在啟動Vue的時候無法啟動， 那么可以直接安裝舊的版本）

??

?

2.?? 配置VUE

配置系統變量,方便在CMD在任何目錄可以直接運行vue的命令

?

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

?

?

在系統頁面中, 點擊高級系統設置

?

在系統屬性中,點擊環境變量

?

在系統變量下, 點擊Path

?

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

?

?

在NPM中配置vue,

命令 : npm install vue -g

?

配置vue-router

命令: npm install vue-router -g

?

?

安裝vue腳手架

命令 : npm install vue-cli –g

?

?

檢查vue是否安裝成功

命令: vue? -V

?

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

?

3.?? 創建vue2.0項目

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

在E盤根目錄下創建一個叫vueDome的項目。

?

剛開始，E盤下是個空文件夾

?

?

打開CMD, 執行命令vue init webpack vueDome

?

?

確認項目名稱, 如果名稱沒問題,可以直接按回車鍵

?

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

?

?

下面的可以直接選擇默認

?

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

然后開始加載項目文件

注意, 首次運行加載項目會安裝依賴(如下圖)

?

?

項目加載完成, 出現下面的內容

?

項目生產完畢后文件夾下會多出好多文件

?

?

?

?

進入項目

?

?

運行Dev項目

?

?

?

?

如果npm run dev 發生錯誤，錯誤如下圖

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

命令如下：

npm remove webpack-dev-server

npm install webpack-dev-server@2.9.1

?npm run dev

?

?

?

等cmd執行完成,顯示出下面的這個頁面. 就可以在瀏覽器里打開連接了,此時,這個窗體不能關閉

?

?

4. Vue的常見問題

4.1.安裝依賴的時候遇到4048錯誤

截圖如下

?

?

解決方法:

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

?

四.???? 升級到Vue3.X

1.?? 升級腳手架

卸載舊版腳手架

命令: npm uninstall vue-cli -g

?

?

安裝新版本Vue升級包

命令: npm install -g @vue/cli

?

2.?? Vue 3的常用命令

創建項目 vue create [項目名稱]

安裝依賴 vue install

啟動項目 vue run serve

打包 npm run build

?

3.?? 運行Vue項目

3.1.? 打開CMD跳轉到項目的路徑

3.2.? 安裝依賴vue install

3.3.? 啟動項目 vue run serve

五.???? Net 5 Web API 的發布

1.?? 環境配置

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

1. 在服務器儀表盤點擊添加角色和功能

?

1. 開始之前 頁面點擊下一步

?

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

?

1. 服務器選擇,選擇對應的服務器,點擊下一步

?

1. 選擇服務器角色, 勾選IIS, 選擇對應的服務和依賴

?

1. 選擇功能頁面, 選擇需要的組件, 點擊安裝

?

?

IIS安裝完成

1.2.????? 安裝Net5的運行時(不需要重啟)

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

?

?

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

?

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.? 右擊項目名稱,點擊發布, 選擇文件系統.

?

?

3.?? 發布到IIS

3.1.? 將發布的文件復制到服務器下

?

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

(因為項目已經解耦,編譯WMSAPIManage不會自動生成倉儲實現層和服務實現層的dll, 需要右擊這兩個項目名點擊重新生成,然后找到這兩個dll復制到服務器上)

?

3.3.? 安裝Net5的運行時和依賴

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, 如果有這個模塊就沒有問題

?

?

3.5.? 在IIS配置程序運行池

?

?

3.6.? 在IIS中發布

?

3.7.? 測試

?

?

4.?? 遇到的問題

問題: 默認情況下, IIS會攔截Put和Delete請求,以至于Put和Delete在請求的時候會返回405錯誤或者500錯誤.

原因分析：在默認情況下，IIS會安裝一個WebDav模塊，而這個模塊阻止了HTTP的PUT和Delete請求。

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

?

六.???? Vue的打包發布

1.?? 打包Vue

1. 如果項目正在運行, 請先停止運行項目

?

1. 運行命令進行編譯和打包npm run build

?

2.?? 部署到nginx

3.?? 部署到IIS

?