vue3-ts-template

基于 element plus 的 vue3.0+ts+vite 的系统模板

features

• 夜间模式：自定义主题色，支持夜间模式
• 国际化：支持中英文切换
• 动画效果：页面切换和元素进入时有动画效果
• 代码规范：支持 Eslint 和 Prettier
• PWA 缓存：集成 workbox, 使用 service worker 缓存静态资源和离线缓存（生产环境）

todo

• 加载效果
• 权限路由
• 优化动画效果
• Eslint 代码规范化, Prettier 代码格式化
• mock 模拟数据

代码结构

src 目录树如下：

├── 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 安装教程 ）

• 操作系统: Linux, Windows, Mac OSX

• 参考运行环境：node-16.17.0，windows-10

安装前端依赖

进入目录后，终端输入如下命令即可安装所有依赖。

npm install

运行

启动 Web 前端

进入目录，运行npm run dev，即可启动 Web 前端。启动后，可在浏览器中输入http://127.0.0.1:8080访问系统。

系统 logo 来源

https://js.design/community?category=detail&type=resource&id=62ec394df46c9f794d2be2db

预览

主页

夜间模式

英文版主页