Skip to content

基于vite、vue3 集成vue-router、vueuse、pinia、typescript、mock等前端前沿技术。集成ESlint、Prettie、Stylelint等代码规范工具,集成vue-i18n国际化、Element-Plus 及暗黑模式切换功能

Notifications You must be signed in to change notification settings

sssx-li/vue-sy-admin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-sy-admin

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

cli 生成模板基于 vue-vite-template 项目;详情可查看github:vue-vite-templategitee: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"

Type 作用
feat 新增特性
fix bug 修复
perf 改善性能
test 测试
docs 修改文档
style 代码格式修改
refactor 代码重构
build 变更项目构建或外部依赖
ci 更改持续集成软件的配置文件和 package 中的 scripts 命令
chore 变更构建流程或辅助工具
revert 代码回退

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 使用相关系列文章

About

基于vite、vue3 集成vue-router、vueuse、pinia、typescript、mock等前端前沿技术。集成ESlint、Prettie、Stylelint等代码规范工具,集成vue-i18n国际化、Element-Plus 及暗黑模式切换功能

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published