vue-admin
a solution for vue middle or background system(vue 软件开发定制中后台系统解决方案)
😁😁
😁😁
前言 🔥🔥🔥🔥🔥🔥
vue 软件开发定制作为国内前端最常用的 js 框架之一，软件开发定制在处理复杂交互的单页软件开发定制应用中对国内码农很友好，软件开发定制文档比较详细。软件开发定制对于中后台管理系统企软件开发定制业开发比较常用，软件开发定制所以利用空余时间集成软件开发定制了一个常用版本出来(没有 vue 软件开发定制基础的同学可以先学习 软件开发定制的基础知识)，可 clone 软件开发定制至本地进行业务快速开发
安装运行
1.使用-admin-cli脚手架工具下载或克隆项目源码🔥🔥
npm install -g vue2-admin-cli // 安装vue2-admin-cli# oryarn global add vue2-admin-clivue2-admin-cli init <project_name> // 创建项目orgit clone https://github.com/szqlovepk/vue-admin.git- 1
- 2
- 3
- 4
- 5
- 6
- 7
2.yarn 安装依赖(国内建议增加淘宝镜像源，不然很慢，你懂的 😁)
yarn
3.启动项目
yarn serve
4.打包项目
build:qa // qa环境build:pre // pre环境build:prod // 线上生产环境- 1
- 2
- 3
依赖模块
项目基于 生成，主要还是列出新添加的依赖包和相关的文档
-
Vue.js 官方的路由管理器。
-
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
-
一款好用的 css 动画库
-
一个极简的 JavaScript 库，可以为现代浏览器解析、验证、操作和显示日期和时间
-
Vue 2.0 的桌面端组件库
-
易用、简洁且高效的 http 库
-
一个一致性、模块化、高性能的 JavaScript 实用工具库。
-
一个基于 JavaScript 的开源可视化图表库
-
一个用于处理 cookie 的简单、轻量级 JavaScript API
-
vue-property-decorator 深度依赖了 vue-class-component 拓展出了很多操作符。正常开发的时候你只需要使用 vue-property-decorator 中提供的操作符即可
-
vuex 模块装饰器
-
一款 vue 常用的富文本组件，我用的时候是 4.x 的版本，最近看已经出新版本了
-
， 我用来做一些首页的日期和数字的展示效果
代码目录
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- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
路由-侧边栏-面包屑-权限
一个后台应用的关键骨架当然少不了路由，侧边菜单栏，面包屑和权限，这些都在 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。}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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才会展示}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
权限
- 菜单路由权限配置，菜单无权限时左侧边栏不会展示，页面无权限时会拦截至403页面
{ path: "authPage", name: "authPage", component: () => import("../views/auth/authPage.vue"), meta: { title: "权限演示菜单", auth: "authPage", //配置权限点key }, },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 组件权限采用v-auth指令并配置权限点key
<input v-focus v-auth:authDirective />- 1
请求拦截器
vue-admin中已为您添加基于axios封装的请求拦截器配置💖💖
-
请求成功数据获取，异常数据捕获并message提示，401拦截至登录界面
-
全局loading，默认请求时开启，请求完成时关闭，可配置关闭
export const appList = (params: any): Promise<any> => request.get("/app", { params, loading: true }); // 不需要默认的全局loading效果可配置loading为false关闭 loading默认为true- 1
- 2
- 3
-
统一下载blob文件配置，您不需要单独处理下载blob文件流，只需要在请求接口配置中加入 responseType: “blob”；如果您想获取接口返回数据，直接在promise.then(res => {}, rej=> {})中获取处理即可
export const exportGoods = (data: any) => request.post("/export", data, { responseType: "blob", });- 1
- 2
- 3
- 4
- 5
模式和环境变量
vue-admin已默认添加常用的development，qa，pre，prod四种环境区分，您可根据实际业务需求增加或修改。
环境变量
- NODE_ENV：当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 “production” 来获取可用于部署的应用程序
- VUE_APP_ENV：用于区分环境的变量，常用于区分不同环境下的服务端api域名
.env.prodNODE_ENV = "production"VUE_APP_ENV = 'prod'- 1
- 2
- 3
- 4
src/consatnt/url.tsexport 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", },};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
功能模块
登录
登录注入 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 哟~~❤️❤️❤️❤️