构建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 // 即可启动本地测试环境