介绍
框架简介
DtFrame是一个基于Vue3、TypeScript、Ant-design-vue的后台方案，目的是为了开发中大型项目的开箱即用解决办法。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。
框架主要包含四个npm包：
- plugins: 主要处理打包配置;
- core: 主要包括hooks、工具集、常用服务、数据仓库、ts类型定义等;
- pages: 处理公共页面，如404;
- ui: 包括系统风格设置、常用组件、常用指令等。
特性
- 主要针对后台管理系统,提供大量可配置的主题风格;
- 开箱即用的高质量的vue组件;
- 涉及内容广而深，将前端常用的组件、业务场景等进行梳理,可进行高效、复杂、安全的快速开发;
支持环境
本地开发推荐使用Chrome 最新版浏览器，不支持Chrome 80以下版本。。 生产环境支持现代浏览器，不支持 IE。
| IE | Edge | Firefox | Chrome | Safari |
|---|---|---|---|---|
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
vite 插件推荐
以下是我使用到的插件,更多使用详情，请参照vite常用插件
- @vitejs/plugin-vue: 提供对 Vue 单文件提供支持
- @vitejs/plugin-vue-jsx: 支持jsx组件
- vite-plugin-dts: 用于从 .ts 或 .vue 源文件生成 .d.ts 文件的 Vite 插件
- vite-plugin-compression: 用于开启gzip文件压缩
- vite-plugin-pwa: 0配置自动更新代码
- vite-plugin-svg-icons: svg图标
- vite-plugin-vue-setup-extend: setup设置name
- unplugin-auto-import: 自动导入变量
- vite-aliases: 自动生成别名
- @vitejs/plugin-legacy: 向下版本兼容
- vite-plugin-windicss: 原子化css
- unplugin-vue-components: 按需加载组件
- rollup-plugin-visualizer: 打包后文件分析
需要掌握的基础知识
本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。 建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助：
一起写文档
如需本地运行文档，请拉取代码到本地。
sh
# 拉取代码
git clone https://gitee.com/dt-web/docs.git
# 安装依赖
yarn
# 运行项目
yarn dev