前言
为了学习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