vue-sy-admin

项目框架基于 cli sy-prt-cli 生成基础模板，详情可查看github:sy-prt-cli、npm:sy-prt-cli

cli 生成模板基于 vue-vite-template 项目;详情可查看github:vue-vite-template、gitee:vue-vite-template

vscode 相关插件推荐

  TypeScript Vue Plugin(Volar)
  Vue Language Features(Volar)

  Eslint
  Stylelint
  Prettier - Code formatter
  EditorConfig for VS Code

  UnoCss

TODO

• 菜单

  • 404
    描述: 404 页面优化

    • 开始时间：
    • 执行人:
    • 未完成

  • 表格解析
    描述: excel 解析 为表格形式(目前仅做上传、导出功能，数据编辑、删除、增加等功能可自行拓展)

    • 开始时间：2023-10-11
    • 执行人: sssx-li
    • 未完成(2023-10-11)

  • 用户管理
    描述: 用户的增删改查，可分配不同角色(管理员|普通用户...)

    • 开始时间：2023-10-10
    • 执行人: sssx-li
    • 已完成(2023-10-10)

  • 角色管理
    描述: 角色的增删改查，不同角色分配不同路由菜单权限、按钮权限

    • 开始时间：2023-10-07
    • 执行人: sssx-li
    • 已完成(2023-10-09)

  • 权限管理
    描述: 权限的增删改查，目前分为功能权限(按钮权限)及菜单权限

    • 开始时间：2023-09-24
    • 执行人: sssx-li
    • 已完成(2023-09-27)

• 功能

  • 动态路由
    描述: 根据用户权限动态展示路由菜单

    • 开始时间: 2023-09-22
    • 执行人: sssx-li
    • 已完成(2023-09-25)

  • 图标选择器
    描述: 用于导航菜单图标展示

    • 开始时间：2023-9-27
    • 执行人: sssx-li
    • 已完成(2023-9-27)

特色功能

  基于vite、vue3

  集成vue-router、vueuse、pinia、typescript、mockjs

  集成ESlint、Prettie、Stylelint代码规范工具。

  集成commitlint git信息提交规范工具

  集成国际化vue-i18n

  集成主题切换功能(cssVar)

  集成多种动态svg图标使用：封装SvgIcon组件、集成unplugin-icons

  数据支持基于mockjs，使用miragejs实现接口本地化拦截

  项目目前已实现： 语言国际化(菜单部分)、动态路由、权限菜单/角色控制、表格解析(上传及下载)、富文本、水印及电子签名等功能

项目结构说明

• generate
  目前用于生成静态资源图片路径，即 src/assets/imgs 目录下的图片资源(为 src/utils/getImgUrl 函数参数提供类型声明)

• mock
  用于 mock 数据供项目使用

• typing
  存放全局变量/属性声明

• src(核心代码存放位置)

  • assets(静态资源文件)
    存放图片、字体等资源文件

  • components
    存放全局通用组件

  • constants
    存放全局常量

  • directives 存放全局指令函数

  • filters
    存放全局过滤函数

  • hooks
    存放全局 hook

  • i18n
    存放国际化配置

  • router
    存放路由配置

  • service
    存放网络请求相关内容

  • store
    存放状态管理

  • styles
    存放全局样式

  • typing
    存放公用变量/属性类型声明及类型转换函数

  • utils
    存放全局工具函数

  • views 存放页面组件

安装依赖

pnpm install

开发环境编译运行

开发时建议将 vite.config.ts 中 dts: './typing/auto.import.d.ts',、dts: './typing/auto.components.d.ts' 放开(取消注释) 以及将 eslintrc 下的 enabled 设置为 true。这样会自动生成组件及、部分方法的 ts 类型声明及 eslint 校验配置

pnpm run dev

生产环境编译打包

pnpm run build

代码格式检测及修复

pnpm run lint

commit 信息规范

e.g.: git commit -m "docs: update README.md"

svg 及 iconify 图标的使用使用

  1. 下载svg文件，并存放在src/assets/svgs目录下(该项目指定在此目录，可以在vite.config.js文件中进行修改)

  2. 使用: i-sy-{{svgName}}
    <!-- i 及 sy (前缀名)均可在vite.config.js进行修改，根据个人喜好设置(具体请查看使用说明:https://github.com/antfu/unplugin-icons) -->
    <i-sy-vue />

iconify 使用及 iconify(访问地址)

  项目中引入的图集unplugin-icons会自动进行安装，可直接使用

  1. 在官方网站找到想用的图标

  2. 复制图集及icon名, 例： clarity:accessibility-1-solid; 图集为clarity，图标名为accessibility-1-solid
  <i-clarity:accessibility-1-solid/>
  or
  <i-clarity-accessibility-1-solid/>

动态 svg 使用 SvgIcon

  // 动态使用的svg存放在src/assets/svgs 目录下。根据svg图标名传入相应的参数, 同时支持修改图标颜色(修改颜色前请先删除svg代码里的fill属性，否则color属性将失效)。例:
  <svg-icon name="vue" style="color: #f60" />

vueuse 使用相关系列文章

1.vueuse-useLocalStorage 在项目中的使用

2.vueuse-useCssVar 实现主题色切换功能

3.vueuse-createFetch 实现接口请求及其封装(代替 axios)

4.vueuse-useFullscreen 优雅的使用全屏及退出全屏

5.vueuse-useDark 实现暗黑主题及浅亮主题及 Element-Plus 暗黑模式