基于 Vue3 + TypeScript + Vite ,及众多开源整合,构建 Vue 开发脚手架。帮助你进行 Vue 项目开发。使用 Vitest 进行单元测试。
- Typescript 支持
- CSS 预处理 less、sass、stylus、WindiCSS
- Locale 国际化
- 多页面应用模式
- Plop 支持
- 定义常用脚本命令
- Eslint Support
- Lint Staged Hook
- 使用 Pinia 来管理状态
- 自定义权限指令
- 使用 Axios 进行 Http API 请求
- 支持 JSX 语法
- 引入 Animite.css
- 使用 vue-Router
- 实现了一套根据权限 Code 控制路由的逻辑
- 使用 keepAlive, 实现页面缓存
- 使用 Vitest 进行单元测试
- Utils 通用工具函数
Node 建议使用 Node 16 或更高版本。开发工具建议使用 VS Code + Volar。
# 安装依赖 yarn # 默认启动 yarn dev # 预览 yarn preview # 全部构建(所有) yarn build # 删除 node_modules yarn clean # EsLint 检查 yarn eslint:check # ESLint 修复 yarn eslint:fix # 使用 prettier 代码格式检查 yarn style:check # 使用 prettier 代码格式化 yarn style:fix # lint staged hook 检查 yarn lint:staged # 模板新建 yarn p # test yarn test yarn test-ui # coverage report yarn cov # dev server yarn serve:dev yarn serve:prod yarn serve:test # windicss-analysis yarn windicss-analysis # build your mode npx vite build --mode your-mode # dev your mode npx vite --mode your-mode├── .editorconfig // 编辑器配置文件 ├── .env.development // 环境配置文件(开发环境) ├── .env.production // 环境配置文件(生产环境) ├── .eslintignore // eslint 忽略文件 ├── .eslintrc.cjs // eslint 配置文件 ├── .github // github 配置文件 ├── .gitignore // git 忽略文件 ├── .husky // husky 配置文件 ├── .npmrc // npm 配置文件 ├── .vscode // vscode 配置文件 ├── LICENSE // 许可证文件 ├── README.md // 项目介绍文件 ├── dist // 打包输出目录 ├── index.html // 主项目入口文件 ├── nested.html // 次/嵌套页面入口文件 ├── package-lock.json // 包依赖配置文件 ├── package.json // 包配置文件 ├── plop // plop 配置 ├── plopfile.cjs // plop 配置文件 ├── postcss.config.js // postcss 配置文件 ├── prettier.config.cjs // prettier 配置文件 ├── public // 项目公共目录 ├── src // 项目源码目录 ├── router │ ├── index.ts // 路由入口 │ ├── modules // 业务路由模块,用户登陆后的根据用户权限进行动态路由添加 │ │ ├── index.ts │ │ └── user.ts │ └── remaining.ts // 其他路由,用户登陆后,不需要权限即可访问的路由 │ ├── assets // 静态资源目录 │ |── api // api 接口目录 │ ├── components // 组件目录 │ ├── config // 配置目录 │ ├── directives // 指令目录 │ ├── hooks // 钩子目录 │ ├── locales // 国际化目录 │ ├── views // 默认视图目录 │ ├── pages // 次页面目录(备用,构建多页应用) │ ├── plugins // 插件目录 │ ├── store // 状态管理 │ ├── styles // 样式目录 │ ├── utils // 工具函数目录 │ ├── main.ts // 项目入口文件 │ ├── App.vue // 项目入口组件 │ └── vite-env.d.ts // vite 环境配置文件 ├── tsconfig.json // TypeScript 配置文件 ├── windi.config.ts // Windi 配置文件 ├── tsconfig.node.json ├── types // 类型文件目录 └── vite.config.ts // vite 配置文件 You can learn more about Take Over mode here.
- Vitest
- vite
- vite plugin
- awesome vite plugin
- Babel Config
- eslintignore-file
- TSconfig
- npmrc
- gitignore
- prettier
- ruoyi
- EsLint
- SFC
- SFC setup
如果你有任何的想法或者意见,欢迎提 Issue 或者 PR。
MIT License © 2022 funnyzak