vue-admin
a solution for vue middle or background system(vue 中后台系统解决方案)
github地址😁😁
预览地址😁😁
前言 🔥🔥🔥🔥🔥🔥
vue 作为国内前端最常用的 js 框架之一,在处理复杂交互的单页应用中对国内码农很友好,文档比较详细。对于中后台管理系统企业开发比较常用,所以利用空余时间集成了一个常用版本出来(没有 vue 基础的同学可以先学习 vue 的基础知识),可 clone 至本地进行业务快速开发
安装运行
1.使用vue2-admin-cli脚手架工具下载或克隆项目源码🔥🔥
npm install -g vue2-admin-cli // 安装vue2-admin-cli
# or
yarn global add vue2-admin-cli
vue2-admin-cli init <project_name> // 创建项目
or
git clone https://github.com/szqlovepk/vue-admin.git
2.yarn 安装依赖(国内建议增加淘宝镜像源,不然很慢,你懂的 😁)
yarn
3.启动项目
yarn serve
4.打包项目
build:qa // qa环境
build:pre // pre环境
build:prod // 线上生产环境
依赖模块
项目基于 vue-cli4.x 脚手架生成,主要还是列出新添加的依赖包和相关的文档
-
vue-router Vue.js 官方的路由管理器。
-
vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
-
animate.css 一款好用的 css 动画库
-
dayjs 一个极简的 JavaScript 库,可以为现代浏览器解析、验证、操作和显示日期和时间
-
element-ui Vue 2.0 的桌面端组件库
-
axios 易用、简洁且高效的 http 库
-
lodash 一个一致性、模块化、高性能的 JavaScript 实用工具库。
-
echarts 一个基于 JavaScript 的开源可视化图表库
-
js-cookie 一个用于处理 cookie 的简单、轻量级 JavaScript API
-
vue-property-decorator vue-property-decorator 深度依赖了 vue-class-component 拓展出了很多操作符。正常开发的时候你只需要使用 vue-property-decorator 中提供的操作符即可
-
vuex-module-decorators vuex 模块装饰器
-
wangeditor 一款 vue 常用的富文本组件,我用的时候是 4.x 的版本,最近看已经出新版本了
-
timeago.js,vue-count-to 我用来做一些首页的日期和数字的展示效果
代码目录
vue-admin
├─ .browserslistrc
├─ .eslintrc.js
├─ .gitignore
├─ babel.config.js
├─ package.json
├─ public
│ ├─ favicon.ico
│ └─ index.html
├─ README.md
├─ src
│ ├─ api
│ │ ├─ index.ts
│ │ ├─ modules
│ │ │ └─ home.ts
│ │ └─ request.ts
│ ├─ App.vue
│ ├─ assets
│ │ └─ logo.png
│ ├─ components
│ │ ├─ echarts
│ │ │ ├─ Bar.vue
│ │ │ ├─ Line.vue
│ │ │ └─ Pie.vue
│ │ ├─ Editor.vue
│ │ ├─ index.ts
│ │ └─ layout
│ │ ├─ Header.vue
│ │ ├─ index.vue
│ │ ├─ Menu.vue
│ │ └─ SubMenu.vue
│ ├─ constant
│ │ └─ url.ts
│ ├─ directives
│ │ └─ index.ts
│ ├─ index.less
│ ├─ main.ts
│ ├─ plugins
│ │ └─ index.ts
│ ├─ router
│ │ ├─ config.ts
│ │ └─ index.ts
│ ├─ shims-tsx.d.ts
│ ├─ shims-vue.d.ts
│ ├─ store
│ │ ├─ index.ts
│ │ └─ modules
│ │ └─ auth.ts
│ ├─ utils
│ │ └─ index.ts
│ └─ views
│ ├─ animation
│ │ ├─ Animate.vue
│ │ └─ Element.vue
│ ├─ auth
│ │ ├─ authDirective.vue
│ │ └─ authPage.vue
│ ├─ component
│ │ └─ EditorPage.vue
│ ├─ error
│ │ ├─ ForbiddenPage.vue
│ │ ├─ InternalServerErrorPage.vue
│ │ └─ NotFoundPage.vue
│ ├─ form
│ │ └─ BasicForm.vue
│ ├─ Home.vue
│ ├─ icon
│ │ └─ IconFont.vue
│ ├─ lodash
│ │ └─ DebounceAndThrottle.vue
│ ├─ Login.vue
│ ├─ mode
│ │ └─ index.vue
│ ├─ router
│ │ ├─ Sub1-1-1.vue
│ │ ├─ Sub1-1-2.vue
│ │ ├─ Sub1-1.vue
│ │ ├─ Sub1-2.vue
│ │ ├─ Sub1.vue
│ │ └─ Sub2.vue
│ └─ table
│ └─ BasicTable.vue
├─ tsconfig.json
├─ vue.config.js
└─ yarn.lock
路由-侧边栏-面包屑-权限
一个后台应用的关键骨架当然少不了路由,侧边菜单栏,面包屑和权限,这些都在 vue-admin 中实现了一套配置化管理,只需你按照约定的规则进行配置这些都将动态生成。🙌🙌
配置项
interface IBaseRouter {
path: string; // 路由
name?: string; // 名称
children?: IBaseRouter[]; // 子路由
redirect?: RedirectOption; // 路由重定向
meta?: IMeta;
hidden?: boolean; // (默认 false)当设置 true 的时候该路由不会在侧边栏出现 如401,login等页面,或者如一些子页面编辑页面/edit/1
component?: Component; // 路由渲染的组件页面
props?: boolean; // 当 props 设置为 true 时,route.params 将被设置为组件的 props。
}
interface IMeta {
title?: string; // 设置该路由在侧边栏和面包屑中展示的名字 不设置时不展示
icon?: string; // 设置该路由在左侧菜单展示的图标 element-ui的icon
breadcrumbAll?: boolean; //(默认 true)如果设置为false,则整个面包屑不会显示 此时可以自己在页面中写自定义的面包屑
breadcrumb?: boolean; // (默认 true)如果设置为false,该路由则不会在breadcrumb面包屑中显示
breadcrumbTo?: boolean; // (默认 true)该路由对应的面包屑是否可以点击
activeMenu?: string; // 指定要高亮的左侧边栏的菜单 在跳转菜单的子页面但是想高亮左侧边栏时非常有用
auth?: string; // 权限点唯一标识key 不配置时默认都可见 配置时权限接口返回的数组中需包含该key才会展示
}
权限
- 菜单路由权限配置,菜单无权限时左侧边栏不会展示,页面无权限时会拦截至403页面
{
path: "authPage",
name: "authPage",
component: () => import("../views/auth/authPage.vue"),
meta: {
title: "权限演示菜单",
auth: "authPage", //配置权限点key
},
},
- 组件权限采用v-auth指令并配置权限点key
<input v-focus v-auth:authDirective />
请求拦截器
vue-admin中已为您添加基于axios封装的请求拦截器配置💖💖
export const appList = (params: any): Promise<any> =>
request.get("/app", { params, loading: true }); // 不需要默认的全局loading效果可配置loading为false关闭 loading默认为true
-
统一下载blob文件配置,您不需要单独处理下载blob文件流,只需要在请求接口配置中加入 responseType: “blob”;如果您想获取接口返回数据,直接在promise.then(res => {}, rej=> {})中获取处理即可
export const exportGoods = (data: any) =>
request.post("/export", data, {
responseType: "blob",
});
模式和环境变量
vue-admin已默认添加常用的development,qa,pre,prod四种环境区分,您可根据实际业务需求增加或修改。
环境变量
- NODE_ENV:当你运行 vue-cli-service build 命令时,无论你要部署到哪个环境,应该始终把 NODE_ENV 设置为 “production” 来获取可用于部署的应用程序
- VUE_APP_ENV:用于区分环境的变量,常用于区分不同环境下的服务端api域名
.env.prod
NODE_ENV = "production"
VUE_APP_ENV = 'prod'
src/consatnt/url.ts
export default {
dev: {
home: "http://localhost:7009",
},
qa: {
home: "http://vue-admin.qa.com",
},
pre: {
home: "http://vue-admin.pre.com",
},
prod: {
home: "http://vue-admin.prod.com",
},
};
功能模块
登录
登录注入 token 在 cookie 中,有效期为一天
首页
完备的首页布局,栅格式响应布局方案,echarts 图表使用
图标
引入阿里图标库,支持样式编辑,特别好用 ✨✨
模式和环境变量
企业项目实际使用场景区分 qa,pre,prod 环境,可根据实际情况添加修改
权限
集成了菜单路由权限和组件指令权限
表格
表单
动画
element 动画和 animate.css 动画演示,突然想起来以前做移动端 h5 的时候有弹层滑入滑出的需求,所以撸了一下示例 😁😁
-
element
-
animate.css
错误页面
-
404-路由错误
-
403-访问权限
-
500-服务异常
lodash
这里我只演示了比较常用的防抖和节流的用法,很多小伙伴搞不清楚防抖和节流的区别,通过这个示例帮助一下了解 👋
路由嵌套
组件
用富文本组件演示一下如何自定义封装一个表单组件
注销
注销时清空权限和 cookie 中的 token
结尾
该项目会不定时更新,该模板目前为 vue2.x 版本,后续会添加更多的模块,并推出 vue3 版本
欢迎和感谢大家 PR~~👏👏
若有问题,可加微信与我进行交流(szq10_04) 😁 😁
如果对你有帮助,给个 star 哟~~❤️❤️❤️❤️