Vue環境的搭建
一. 背景
vue的執行方式有兩種
一種是在頁面引用vue的js包,
一種是搭建腳手架來vue框架.
我們在這裡使用的是第二種方式. 需要安裝的軟體 npm 16.13.1 LTS
現在最新版已經20了， 建議下載LTSC版
下載地址:
二. 安裝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
確認專案名稱, 如果名稱沒問題,可以直接按Enter鍵
名稱校驗失敗,需要手動輸入名稱(注意名稱裡面不能有大小寫)
下面的可以直接選擇預設
都填寫完成(藍色的文字都是選擇的文字)
然後開始載入專案檔案
注意, 首次執行載入專案會安裝依賴(如下圖)
專案載入完成, 出現下面的內容
專案生產完畢後資料夾下會多出好多檔案
進入專案
執行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錯誤
截圖如下
解決方法:
- 刪除C:\Users\{賬戶}\下的.npmrc檔案
- 執行 npm cache clean –force
- 在專案中把node_modules資料夾和package-lock.json檔案刪除
- 重新執行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(不需要重啟)
- 在伺服器儀表盤點選新增角色和功能
- 開始之前 頁面點選下一步
- 安裝型別選擇預設(基於角色或功能的安裝), 點選下一步
- 伺服器選擇,選擇對應的伺服器,點選下一步
- 選擇伺服器角色, 勾選IIS, 選擇對應的服務和依賴
- 選擇功能頁面, 選擇需要的元件, 點選安裝
IIS安裝完成
1.2. 安裝Net5的執行時(不需要重啟)
- 首先,開啟IIS,開啟主頁的模組,檢查模組中是否有AspNetCoreModuleV2,如果有, 請忽略1.2這一步, 直接到1.3
- 如下圖, 在我們演示的伺服器中沒有AspNetCoreModuleV2模組,那麼我們就需要安裝Net 5的執行環境
- 下載依賴包並安裝
- 3
- 5
- 6
- 45
- 4
- 5
2. 打包
2.1. 右擊專案名稱,點選發布, 選擇檔案系統.
3. 釋出到IIS
3.1. 將釋出的檔案複製到伺服器下
3.2. 將WMSAPI.Core.Repository.dll和WMSAPI.Core.Service.dll也複製到伺服器下
(因為專案已經解耦,編譯WMSAPIManage不會自動生成倉儲實現層和服務實現層的dll, 需要右擊這兩個專案名點選重新生成,然後找到這兩個dll複製到伺服器上)
3.3. 安裝Net5的執行時和依賴
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
- 如果專案正在執行, 請先停止執行專案
- 執行命令進行編譯和打包npm run build
2. 部署到nginx
3. 部署到IIS