# 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
## 预览
主页
![image](https://user-images.githubusercontent.com/90198481/212660162-11c2ddac-6a1c-44f9-968e-7405ebdedd98.png)
夜间模式
![image](https://user-images.githubusercontent.com/90198481/212660256-48d991cb-e450-4442-915a-0a9bf7e4fc13.png)
英文版主页
![image](https://user-images.githubusercontent.com/90198481/212660398-a528ba94-4d30-4ce5-a8fa-7a41e60fdf3c.png)
没有合适的资源?快使用搜索试试~ 我知道了~
基于element plus的vue3+ts+vite的系统模板.zip
共72个文件
ts:41个
vue:11个
json:5个
需积分: 1 1 下载量 38 浏览量
2024-01-03
23:07:36
上传
评论
收藏 257KB ZIP 举报
温馨提示
Vue3,springboot,element-ui使用技巧,实战应用开发小系统参考资料,源码参考。 详细介绍了一些Qt框架的各种功能和模块,以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者,能够帮助你快速上手Qt并掌握其高级特性。
资源推荐
资源详情
资源评论
收起资源包目录
基于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
共 72 条
- 1
资源评论
白话Learning
- 粉丝: 4707
- 资源: 3065
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- lsb-release,安装磐维数据库,安装oracle数据库等常用的依赖包
- redhat-lsb-core,安装磐维数据库,安装oracle数据库等常用的依赖包
- 丹佛丝堆垛机变频器参数配置起升、运行、货叉
- JSP学生学籍管理系统(源代码+论文+开题报告+外文翻译+答辩PPT).rar
- jsp医院病区管理系统(论文+中期检查表+任务书+综合材料).rar
- jsp研究生党建管理系统pc-毕业设计.rar
- JSP在线考试系统的设计与实现(源代码+论文).rar
- JSP在线CD销售系统(论文).rar
- jSP在线教学质量评价系统的设计与实现(源代码+论文).rar
- JSP自动排课管理系统(源代码+论文+开题报告).rar
- JSP在线学习系统设计(源代码+论文).rar
- JSP作业管理系统(源代码+论文).rar
- JSP自动排课系统(源代码+论文+开题报告).rar
- lerx2_utf8_v2_beta2_20121214.rar
- putty,linux客户端工具
- 提高Windows 11文件资源管理器显示文件夹大小功能
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功