一个基础的后台管理系统模版,方便快速开发

此项目的开发离不开下面这些项目

• vue 基于 Vue 3 的项目
• vue-router 提供路由支持
• vueuse 使用其中的可组合函数
• element-plus 使用 element-plus 组件及其图标库
• element-pro-components 使用 element-pro-components 快速构建后台界面
• quill 基于 Quill 的富文本编辑器
• virapi 由 virapi 提供的在线 Mock 接口
• vite 基于 Vite 开发和打包
• vue-tsc 提供类型检查
• typescript 全局基于 TypeScript 开发
• eslint typescript-eslint prettier 提供代码检查或格式化
• unplugin-auto-import unplugin-vue-components 提供组件及函数的自动引入
• husky lint-staged 在 git 提交前格式化代码
• ...

• 大量新技术
• 项目精简,不包含无用依赖
• 使用可组合函数,方便复用
• 数据化驱动界面,基于 element-pro-components 通过配置直接生成表单和表格等

选择下面一种方式快速开始

• 快速开启在线编辑器

Open in StackBlitz

• 通过克隆

git clone https://github.com/tolking/element-admin-template.git

• 直接下载压缩包

• 快速创建模版项目

• 如果想参与贡献推荐 Fork

• 初始化依赖,推荐使用 pnpm

pnpm install
# 或者
yarn install
# 或者
npm install

• 项目基础信息配置

  • 修改 .env.development .env.production 中的地址为你请求的 api 地址
  • 修改 src/utils/config.ts 中的配置信息
  • 全局搜索 // NOTE:,这里包含了你可能需要更改的代码

• 启动项目

pnpm dev
# 或者
yarn dev
# 或者
npm run dev

• 项目示例是基于 TypeScript 和 Vue 3 的 setup 语法糖,你可以不使用 TypeScript,但 setup 语法糖是非常推荐的。项目中提供大量的可组合函数供在 setup 中使用。
• 项目默认会在 git 提交前进行格式化,如果想取消请移除 husky lint-staged,并删除 .husky 文件夹
• 如果不需要格式化请移除 @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-prettier eslint-plugin-vue prettier,并删除 .eslintrc.js .prettierrc 文件
• 文件 .eslintrc-auto-import.json auto-imports.d.ts components.d.ts 是插件自动生成的。删除代码可能无法通过测试,请确保输出的内容已经不在项目中使用。
• 项目打包时会强制进行类型检查,修改 package.json 中 scripts 即可

- "build": "vue-tsc --noEmit && vite build",
+ "build": "vite build",

• 项目中的 useForm useDetail useList useCrud 是基于 Restful API 接口规范进行封装的,请根据情况使用
• 项目中的 useGet usePost usePut useDelete useBlob 是可组合函数,接收响应式参数。与 Axios 使用存在很大区别

const url = ref('/url')
const form = ref({})
const { data, execute } = uesPost(url, form)
// 通过 execute 触发提交
execute()

• vue vue-router @vueuse/core element-plus element-pro-components 会自动引入
• 自定义组件禁止使用 el pro 开头,可能会触发错误
• 使用 ElIcon 开头的组件将会代理到 @element-plus/icons-vue

• 在 src/utils/api.ts 中增加 api 地址
• 在 src/router/index.ts 中配置路由信息
• 在 src/types/ 中增加相关类型
• 在 src/views/ 中增加界面,参考模版进行页面构建

pnpm build
# 或者
yarn build
# 或者
npm run build

如果你有好的想法,欢迎加入贡献

MIT