# vue3-ts-template
基于 element plus 的 vue3.0+ts+vite 的系统模板
## features
- **夜间模式**：自定义主题色，支持夜间模式
- **国际化**：支持中英文切换
- **动画效果**：页面切换和元素进入时有动画效果
- **代码规范**：支持 Eslint 和 Prettier
- **PWA 缓存**：集成 workbox, 使用 service worker 缓存静态资源和离线缓存（生产环境）
## todo
- [ ] 加载效果
- [ ] 权限路由
- [ ] 优化动画效果
- [x] Eslint 代码规范化, Prettier 代码格式化
- [x] mock 模拟数据
## 代码结构
src 目录树如下：
```plain
├── api 接口请求
├── assets 静态资源
├── components 公共组件
├── hook 公共hook
├── layout 页面布局
├── locale 国际化
├── router 路由
├── store pinia状态管理
├── styles 公共样式
├── utlis 公共方法
├── views 页面
├── App.vue 入口页面
├── env.d.ts 声明文件
├── lang.d.ts 语言声明文件
├── main.ts 入口文件
└── vite-env.d.ts vite声明文件
```
## 安装
### 前置条件
- Node.js >= 16.0 （ [node 安装教程](https://www.runoob.com/nodejs/nodejs-install-setup.html) ）
- 操作系统: Linux, Windows, Mac OSX
- 参考运行环境：node-16.17.0，windows-10
### 安装前端依赖
进入目录后，终端输入如下命令即可安装所有依赖。
```bash
npm install
```
## 运行
### 启动 Web 前端
进入目录，运行`npm run dev`，即可启动 Web 前端。启动后，可在浏览器中输入`http://127.0.0.1:8080`访问系统。
### 系统 logo 来源
https://js.design/community?category=detail&type=resource&id=62ec394df46c9f794d2be2db
## 预览
主页
夜间模式
英文版主页
基于element plus的vue3+ts+vite的系统模板.zip （72个子文件） 
VUE3_new mock api 
login.ts 831B dashboard.ts 818B index.ts 106B tsconfig.node.json 206B renovate.json 135B src main.ts 1KB App.vue 276B store modules user index.ts 454B test index.ts 428B page index.ts 673B locale index.ts 460B index.ts 368B assets icons sider 
menu.svg 1KB dashboard.svg 1KB test vue.svg 496B images 
login.png 54KB logo.png 4KB styles style.css 2KB global.less 37B api dashboard types.ts 214B index.ts 260B Login types.ts 286B index.ts 441B utils http axios type.ts 285B index.ts 3KB directives pin.ts 798B index.ts 138B components SvgIcon index.vue 1KB VirtualList index.vue 2KB interface login index.ts 216B lang.d.ts 105B hook useLocale.ts 596B useLoading.ts 1KB env.d.ts 161B router typings.d.ts 307B modules upload index.ts 467B index.ts 2KB login index.ts 242B vite-env.d.ts 87B locale zh-CN.ts 486B en-US.ts 503B index.ts 587B layouts sider index.vue 5KB locale zh-CN.ts 98B en-US.ts 102B header index.vue 7KB locale zh-CN.ts 108B en-US.ts 105B index.vue 2KB content index.vue 675B views dashboard index.vue 7KB locale zh-CN.ts 227B en-US.ts 249B Test index.vue 296B upload index.vue 2KB locale zh-CN.ts 147B en-US.ts 153B login index.vue 3KB locale zh-CN.ts 80B en-US.ts 78B .prettierignore 18B .env.development 67B package.json 2KB public logo.svg 4KB package-lock.json 758KB .eslintrc.cjs 1KB vite.config.ts 4KB
index.html 363B .prettierrc.cjs 311B .gitignore 283B tsconfig.json 702B README.md 2KB资源评论
