tive-vue3-vite-demo

参照文档 ** 文档地址

主要技术栈

vite + vant3 + vue3 + rem 布局

项目介绍

此项目使用 Vite 2.x + Vue 3.x 构建，集成了以下功能：

1. vue-router路由，配置了路由懒加载，全局路由守卫，组合式 API 中路由跳转，参数获取。
2. vuex状态管理，配置命名空间（namespaced）的业务模块（modules），vuex actions异步状态流管理。
3. axios实例全局引用。
4. vant移动端组件库。
5. lib-flexible+rem移动端适配，默认为375px设计稿的适配，若是750px的设计稿可调整remUnit的值，轻松适配。
6. sass预处理器。
7. vue.config.js本地跨域处理，更改对应的url和path即可使用。
8. nodemon动态监听vue.config.js，有更改自动重启服务，执行npm run dev时生效。
9. Composition API（<script setup>）搭配ref和reactive数据绑定、computed计算属性、watch监听、props组件传参等等常用 API 的使用都有完整事例，以供参考。
10. 配置了 tive-cli 自动化执行 shell 脚本功能。提示： tive-cli 需要使用 npm i -g tive-cli 全局安装。
11. 自动化打包和 zip 压缩。
12. 提供了 WebAssembly（Wasm）使用案例，以及对应的交互展示页面。

项目展示

在线体验： 项目地址

npm 命令

# 开启项目
cnpm i -g tive-cli
tive create vue3-demo

# 启动本地服务
npm start

# 启动服务并监听 vite.config.js 变化
npm run dev

# 预览
npm run serve

# 生产打包
npm run build

# 测试打包
npm run build:dev

# 生产打包并压缩
npm run zip

# git自动化提交
npm run git