vite2+vue3+vuex4+typescript4项目实战来了

7,107 阅读2分钟

前言

为了学习vite2、熟悉vue3语法,能在项目中可实际使用,我基于vite2写了一个项目实战开发模板,欢迎大家的讨论。

地址

  1. git地址: vite-vue3-template

技术栈

  1. vite2 + vue3 + vue-router4 + vuex4 + less
  2. ant-design-vue2 (ui框架)
  3. 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

功能

  1. 项目框架搭建
  2. ts封装
  3. vuex类型封装 ( 极力推荐使用 )
  4. axios封装
  5. 代理配置
  6. eslint配置,使用eslint-config-vue-mkscanner插件
  7. autoprefixer配置
  8. 支持vue模板语法及jsx语法
  9. 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提示:

image.png

getters提示:

image.png

dispatch提示:

image.png

state提示:

image.png

拥有了极好的vuex状态管理提示,状态管理开发及维护效率刚刚滴滴,大家有注意看到payload也是有提示的,如果对大家有帮助麻烦给个start吧。

说明

这个项目实战模板还有很多不完善的地方,可基于此模板稍微改造一下就可以在真实项目中使用,如项目封装有问题或有优化点烦请留言讨论,或者前往github提issue,感谢。

最后

说得再多,不如自己动手实践看看效果吧,克隆模板试试吧。别忘了给个star,开源不容易,github项目里面还有mk-better-cli脚手架搭建组件库等项目,https://github.com/mk-site/vite-vue3-template