- 🦄使用 Vite 构建工具快速构建项目
- 🛠️集成 Vue DevTools，可视化项目，助力开发和测试
- 🥑使用 ESLint、Stylelint 代码规范保证代码质量
- 📦拆箱即用，结合了 Vue3、Vite、Alova 和 TypeScript
- 🕸自动配置路由，使用 unplugin-vue-router 插件自动生成路由
- 🥝自动引入，使用 unplugin-auto-import 插件实现组件自动引入
- ✨集成 UnoCSS，提供轻量级的样式解决方案
- 👀使用 Onu UI，一个基于UnoCSS的UI组件库
- 🍀集成 Vitest，用于项目的单元测试
- 🧰使用 VueUse 函数库辅助开发
- 💀使用 v3-directives 指令库辅助开发
- 🙈使用 Alova 实现网络请求
- 🍍使用 Pinia 进行状态管理
- 📌使用 husky、lint-staged 规范git commit
- Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)
- Vite | Next Generation Frontend Tooling (vitejs.dev)
- unplugin-auto-import
- unplugin-vue-router
- vite-plugin-components
- vite-plugin-vue-devtools
- pinia-auto-refs
- 🐶 husky | 🐶 husky (typicode.github.io)
- lint-staged: 🚫💩 — Run linters on git staged files (github.com)
- 检测并修复 JavaScript 代码中的问题。 - ESLint - 插件化的 JavaScript 代码检查工具
- Home | Stylelint中文文档 | Stylelint中文网
- Commitizen by commitizen
- cz-emoji git commit emoji Message
该项目是一个基于 Vue3、Vite 和 TypeScript 的脚手架模板，集成了 Alova 网络请求库和 Pinia 状态管理库，组件库采用Onu-UI。它旨在提供一个快速搭建 Vue3 项目的起点，同时也使用了一些优秀的第三方插件和库，以提高开发效率和项目质量。
克隆项目到本地：
npx degit ileostar/vitesse-star 你的项目名称 # If there is no npx, npm i -g npx first进入项目目录：
cd 你的项目名称安装依赖：
pnpm install # If there is no pnpm, npm i -g pnpm first启动开发服务器：
pnpm dev打开浏览器，访问 http://localhost:3891 即可查看项目运行效果。
├── github // 存放github的workfow
├── .husky // git hook预处理
├── .vscode // vscode的配置
│ ├── extensions.json // 插件设置
│ ├── setting.json // IDE设置
├── public
│ ├── vite.svg // 网站logo
├── src
│ ├── api // 接口目录，使用alova接口函数
│ ├── assets // 静态资源文件夹，如图片、字体等
│ ├── components // 组件目录
│ ├── composables // 存放状态逻辑的函数
│ ├── helper // pinia-auto-refs插件自动生成目录
│ ├── pages // 视图目录，存放页面级组件
│ ├── store // Vuex状态管理文件夹
│ ├── styles // 样式文件夹，存放全局样式和公共样式
│ ├── App.vue // 根组件
│ └── main.ts // 项目入口文件
├── test // 单元测试
├── types // 类型文件
├── .editorconfig // IDE配置文件
├── .gitignore // git忽略文件
├── .npmrc // npm管理配置
├── .stylelintrc.json // stylelintrc文件
├── .env // 配置环境
├── .env.production // 生产配置环境
├── .env.development // 开发配置环境
├── index.html // 项目页面入口
├── netlify.toml // netlify部署配置
├── eslint.config.mjs // ESLint配置文件
├── package.json // 项目依赖配置文件
├── shims.d.ts // 声明文件
├── README.md // 项目说明文件
├── tsconfig.json // TS配置文件
├── tsconfig.node.json // TS-Node配置文件
├── uno.config.ts // ESLint配置文件
└── vite.config.ts // Vite项目配置文件
默认读取顺序.env.development/.env.production > .env
开发环境下可以在.env.development修改需要配置
生成环境下可以在.env.production修改需要配置
需要以VITE开头，如果在src中用可以使用import.meta.env.<配置项>
该项目使用 ESLint 来保证代码规范一致性。你可以在 eslint.config.mjs 文件中查看相关配置。在提交代码时，将会自动进行代码规范检查。
该项目使用 Alova 插件来发送网络请求，下面是使用文档。
该项目使用 unplugin-vue-router 插件来自动生成路由配置。详细的使用方法请参考插件文档。
该项目使用 unplugin-auto-import 插件来实现组件的自动引入，你可以在 vite.config.ts 中修改自动引入的规则和配置。
该项目使用 unplugin-vue-components 插件来实现组件的自动引入，即定义组件直接使用即可，无需手动引入，你可以在 vite.config.ts 中修改自动引入的规则和配置。
该项目使用 Pinia 进行状态管理。你可以在 src/stores 目录下创建自己的状态模块，并在需要的组件中引入并使用它们。
这里使用了pinia-auto-refs插件简化引入
使用插件前：
import useUserStore from '@/store/user'
const userStore = useUserStore()
const { name, token, fullName } = storeToRefs(userStore)
const { updateName } = userStore使用插件后：
const { name, token, fullName, updateName } = useStore('user')该项目集成了 Vitest 单元测试工具。你可以在 test 目录下编写和运行测试用例。详细的使用方法请参考 Vitest 文档。
如果你发现任何问题或有改进建议，请随时提交 Issue 或 Pull Request。我们欢迎并感谢你的贡献！
以上是一个简单的示例，你可以根据实际情况添加或修改内容。希望能对你有所帮助！
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent