vite2+vue3+vuex4+typescript4项目实战来了
前言
为了学习vite2、熟悉vue3语法，能在项目中可实际使用，我基于vite2写了一个项目实战开发模板，欢迎大家的讨论。
地址
git地址： vite-vue3-template
技术栈
vite2 + vue3 + vue-router4 + vuex4 + less
ant-design-vue2 (ui框架)
typescript4
目录结构
├── index.html ├── package.json ├── public │ └── favicon.ico ├── readme.md ├── src │ ├── App │ │ ├── index.tsx │ │ └── index.vue │ ├── action │ │ ├── readme.md │ │ └── test │ │ ├── index.ts │ │ └── interface.ts │ ├── assets │ │ └── favicon.ico │ ├── component │ │ └── Counter │ │ └── index.tsx │ ├── hooks │ │ ├── useModal │ │ └── useStore │ │ ├── index.ts │ │ └── readme.md │ ├── http │ │ ├── index.ts │ │ └── originAxios.ts │ ├── index.less │ ├── main.ts │ ├── pages │ │ ├── About │ │ │ ├── index.less │ │ │ ├── index.tsx │ │ │ └── index.vue │ │ └── Home │ │ ├── index.tsx │ │ └── index.vue │ ├── router │ │ └── index.ts │ ├── shims-vue.d.ts │ ├── store │ │ ├── helper.ts │ │ ├── index.ts │ │ └── modules │ │ └── common.ts │ └── utils ├── tsconfig.json ├── typings ├── vite.config.js └── yarn.lock 复制代码
功能
项目框架搭建
ts封装
vuex类型封装（ 极力推荐使用 ）axios封装
代理配置
eslint配置，使用eslint-config-vue-mkscanner插件
autoprefixer配置支持vue模板语法及jsx语法
alias配置
正式开始吧
用法
npm run dev npm run build 复制代码
使用tsx还是template模板方式
1、请在App/ pages/About pages/Home 自由选择文件，并删除多于文件 2、router/ 引入页面文件 .tsx 或.vue 文件 3、src/maint.ts 修改引入App/ 文件为.tsx 还是.vue文件 复制代码
设置vue组件库全局样式
vite.config.js => modifyVars 复制代码
eslint使用
1、vscode安装Eslint插件 2、引入eslint-config-vue-mkscanner 3、校验了eslint会自动提示 复制代码
vuex用法
1、访问state, dispatch, getters, commit均有提示 2、封装的useStore 集成自vuex的useStore
import useStore from 'hooks/useStore'; const { state, dispatch, getters, commit } = useStore(); 复制代码commit提示：
getters提示：
dispatch提示：
state提示：
拥有了极好的vuex状态管理提示，状态管理开发及维护效率刚刚滴滴，大家有注意看到payload也是有提示的，如果对大家有帮助麻烦给个start吧。
说明
这个项目实战模板还有很多不完善的地方，可基于此模板稍微改造一下就可以在真实项目中使用，如项目封装有问题或有优化点烦请留言讨论，或者前往github提issue,感谢。
最后
说得再多，不如自己动手实践看看效果吧，克隆模板试试吧。别忘了给个star,开源不容易，github项目里面还有mk-better-cli脚手架搭建组件库等项目，https://github.com/mk-site/vite-vue3-template
作者：mk
链接：https://juejin.cn/post/6991405764275339295