構建vue3項目

vue3 是基於 vite構建工具

1） 快速冷啟動不需要等待打包

2） 即時熱模塊更新

3） 實現了真正的按需加載，不用等整個應用加載完成

 

1. 安裝穩定版本vue即 3.0.4 // npm install vue@next //來源：安裝 | Vue.js (vuejs.org)

2.  安裝配置vue-router即 4.0.10 // npm install vue-router@4

問題處理： failed to fetch dynamically imported module 動態獲取組件失敗

解決：來源：路由懶加載 | Vue Router (vuejs.org)

1）需要通過Babel，添加 syntax-dynamic-import 插件，進行解析。// npm install --save-dev @babel/plugin-syntax-dynamic-import

2）通過promise 達到異步效果  

3. 安裝scss 預編譯 注意：版本匹配   

來源：

node-sass - npm (npmjs.com)

sass-loader | webpack 中文文檔 (docschina.org)

4. 安裝配置 axios  來源：axios中文文檔|axios中文網 | axios (axios-js.com)

根據項目情況配置可實例化配置 axios

5. 安裝配置vuex狀態管理  安裝 | Vuex (vuejs.org)

6. 項目ui組件選用 element ui 完善靈活相對可靠  來源： element-plus.org

安裝：npm i element-plus

為了達到輕量化的目的 我們采用了組件單獨引用的方式 需要用到 babel-plugin-import插件自動引入關聯文件

1.0.2-beta.55 版本會報錯  ElementPlusError: [Util] binding value must be a string or number. 降低到 1.0.2-beta.54 就可以了

7. 根據不同環境配置 打包部署命令

需要結合 .env 來配置 請求地址等信息

例如：配置測試192.168.1.161服務

1） 新增 .env.test 文件 內容如下

# just a flag
ENV = 'test'

# base_api
VUE_APP_BASE_API = 'http://192.168.1.161:8860/web-mall'

2） webpack.json 文件的 script 添加配置

"dev:test": "vite --mode test"

"build:test": "vite build --mode test"

3） npm run dev:test // 即可啟動本地測試環境