分类:后端集成

template-manage-uivue3naivetypescript

作者:xcom1057136457 开源协议:MIT


pSqCfTH.png

<<<<<<< HEAD

账号: admin

密码:123456

=======>>>>>>>4d66603022c5b81785bdafc36a6eaac0d70d0aea

1. 技术栈

Vue3 + Vue Router + Pinia + TypeScript + Element Plus + Naive UI + Axios

2. 主要功能

  1. UI组件按需加载(Tree Shaking),src/components目录下所有组件自动注册
  2. CSS编写引入Tailwind CSS,无需费力定义class编写对应CSS,参考链接: https://tailwindcss.com/<<<<<<< HEAD
  3. SVG图片自定引入,将图片放入assets/icons即可,使用:

  4. SVG图片自定引入,将图片放入assets/icons/svg即可,使用:>>>>>>>4d66603022c5b81785bdafc36a6eaac0d70d0aea
  1. 第三方图标库icones自动引入,参考链接:https://icones.netlify.app/
  2. 打包文件自动GZIP,压缩率40%以上
  3. 通过proxy进行API代理,使用方法:
server: { open: true, https: false, proxy: { '/api': { target: '', // 线上 changeOrigin: true, rewrite: (path: string) => path.replace(/^\/api/, '') } }}
  1. 打包文件自动去除console.log以及debugger,打包文件名自动加入timeStamp防止项目更新缓存
  2. 加入Sentry日志收集平台,自动收集线上环境错误日志
  3. 加入Pinia持久化,使用方法:
export const useGlobalStore = defineStore('global', { persist: { key: '', storage: window.localStorage, paths: [] }, state: () => { return {} }, getters: {}, actions: {}})
  1. 具有完善的权限方案,包含:路由由接口数据控制并自动组装菜单栏、用户权限获取、按钮权限directive...等等
  2. 具有一些小功能,如:锁屏、窗口最大化、暗黑模式、水印等等
  3. 自定义设置

pSq9fGq.png

  1. 代码规范集成Eslint + Prettier
  2. 完善的Axios配置,可进行二次自定义
  3. 具有完善的CRUD组件,可以自定义修改

pSqCiod.png

3. 项目预览

pSqC8Wq.png

pSqCAJI.png

pSqCZSP.png