# vite-template

**Repository Path**: justit/vite-template

## Basic Information

- **Project Name**: vite-template
- **Description**: Vue 3 + Vite 现用项目模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2022-06-17
- **Last Updated**: 2026-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 特性

- ⚡️ [Vue 3](https://github.com/vuejs/core), [Vite 3](https://github.com/vitejs/vite), [npm](https://www.npmjs.com/), [ESBuild](https://github.com/evanw/esbuild)
- 🎉 [Element Plus 开箱即用](https://github.com/element-plus/element-plus) - 基于 Vue.js 3 的强大 UI 库
- 🔥 [Axios 配置和封装](https://github.com/axios/axios) - 基于 Promise 的 HTTP 请求库
- 💡 [Vue Router 4](https://router.vuejs.org/zh/) - Vuejs 的官方路由
- 📦 [组件自动按需加载](https://github.com/antfu/unplugin-vue-components) - 自动按需注册组件, 无需 import
- 🍍 [Pinia 状态管理](https://pinia.esm.dev/) - 你将会喜欢上的 Vue Store
- 😃 [iconify/vue](https://docs.iconify.design/icon-components/vue/) - 超过 150，000 个开源矢量图标，各种图标集为你所用
- 👩‍🎨 [NProgress](https://github.com/rstacruz/nprogress) - 页面加载进度反馈
- 📥 [create-zoro](https://www.npmjs.com/package/create-zoro) - 一行命令完成打包，服务器代码备份，远程部署
- 🔑 完整支持的代码风格规范和代码提交规范
- ☁️ 支持零配置部署 Netlify

### 插件

- [Vue Router 4](https://router.vuejs.org/zh/) - Vuejs 的官方路由
- [Pinia](https://pinia.esm.dev) - 新一代的 Vue Store 状态管理
- [Axios](https://github.com/axios/axios) - 基于 Promise 的 HTTP 请求库
- [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components) - 自动按需加载组件
- [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import) - 自动按需加载 API
- [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages) - 基于文件系统的Vite路由生成器
- [VueUse](https://github.com/antfu/vueuse) - 实用的 Composition API 工具合集

### 编码风格

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

## 开发规范

### vscode 代码格式化自动使用 eslint 规范

- 禁用 Vetur // vue2 代码风格
- 安装 [Eslint 插件](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- 安装 [Vue Language Features (Volar) 插件](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) // vue3 代码风格
- 在设置>扩展>eslint 找到 **_ESLint >Format: Enable_** 启用该选项 // 使用 eslint 风格格式化代码
- 重启 vscode
- 打开带有 ESLint 配置文件的项目中任意的 .js 或是 .vue 文件， **_鼠标右键>使用...格式化_** 配置默认格式化>eslint

### 代码提交规范

代码提交遵循[angular commit 规范](https://zj-git-guide.readthedocs.io/zh_CN/latest/message/Angular%E6%8F%90%E4%BA%A4%E4%BF%A1%E6%81%AF%E8%A7%84%E8%8C%83/)

- build: 对构建系统或者外部依赖项进行了修改
- ci: 对 CI 配置文件或脚本进行了修改
- docs: 对文档进行了修改
- feat: 增加新的特征
- fix: 修复 bug
- perf: 提高性能的代码更改
- refactor: 既不是修复 bug 也不是添加特征的代码重构
- style: 不影响代码含义的修改，比如空格、格式化、缺失的分号等
- test: 增加确实的测试或者矫正已存在的测试

### 项目中菜单等图标资源

- [图标库地址](https://icones.js.org/)

### 路由规范

项目基于[文件系统的Vite路由生成器](https://github.com/hannoeru/vite-plugin-pages) 奉行『约定优于配置』文件会根据路径自动生成对应路由

```
|-src                          # 项目入口
| |-pages                      # pages下的文件会根据路径自动生成对应路由
| | |-users                    # 路由入口
| | | |-index.vue              # index为默认入口 路由会自动生成 /users
| | | |-foo.vue                # 路由会自动生成 /users/foo
| | | |-[id].vue               # 路由会自动生成 /users/:id
| | | |-components             # 组件下的vue文件不会生成对应路由
| | | | |-form.vue
| |-views                      # views下的文件路由会包含在layout中 并添加权限校验
| | |-home                     # 路由入口
| | | |-index.vue              # index为默认入口 路由会自动生成 /home
| | | |-foo.vue                # 路由会自动生成 /home/foo
| | | |-[id].vue               # 路由会自动生成 /home/:id
| | | |-components             # 组件下的vue文件不会生成对应路由
| | | | |-form.vue
```

### keep_alive规范
如果想要使用keep_alive缓存页面，只需要在对应的入口页面添加name即可
文件名需与路径名保持一致，使用大驼峰命名规范
```
// /home/foo.vue
<script>
export default {
  name: 'HomeFoo'
}
</script>
```
* 注意 组件名不可重复

### 主题色规范

系统主题存放于 src/setting.js 中。

```
若需要动态获取主题，将dynamic改为true
改为true后 将在src/plugins/authorize.js 路由拦截中获取主题色重新渲染页面。
主题数据全部放在store.state.theme[xxx]下
```
## 使用

### 开发

只需要执行以下命令就可以在 http://localhost:9527 中看到

```bash
npm run dev
```

### 构建

构建该应用只需要执行以下命令

```bash
npm run build
```

然后你会看到用于发布的 `dist` 文件夹被生成。

### 部署

[create-zoro](https://www.npmjs.com/package/create-zoro)

```bash
npm run deploy
```

可以看到打包，服务器代码备份，远程部署执行流程