项目框架基于 cli sy-prt-cli
生成基础模板,详情可查看github:sy-prt-cli、npm:sy-prt-cli
cli 生成模板基于 vue-vite-template
项目;详情可查看github:vue-vite-template、gitee:vue-vite-template
TypeScript Vue Plugin(Volar)
Vue Language Features(Volar)
Eslint
Stylelint
Prettier - Code formatter
EditorConfig for VS Code
UnoCss
-
菜单
-
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
e.g.: git commit -m "docs: update README.md"
Type | 作用 |
---|---|
feat | 新增特性 |
fix | bug 修复 |
perf | 改善性能 |
test | 测试 |
docs | 修改文档 |
style | 代码格式修改 |
refactor | 代码重构 |
build | 变更项目构建或外部依赖 |
ci | 更改持续集成软件的配置文件和 package 中的 scripts 命令 |
chore | 变更构建流程或辅助工具 |
revert | 代码回退 |
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存放在src/assets/svgs 目录下。根据svg图标名传入相应的参数, 同时支持修改图标颜色(修改颜色前请先删除svg代码里的fill属性,否则color属性将失效)。例:
<svg-icon name="vue" style="color: #f60" />