BraveWangDev

一,前言去年年底到今年年初这段时间,使用Vue2.x+elementUI做了一套后台管理框架目的是要做前端工程化的建设,对Vue-cli2.x源码做了定制修改,添加了一些功能通过学习cli及脚手架模板的源码,我分别做了适用于admin,app,web的三类脚手架并通过定制的cli命令实现对应脚手架模板项目的一键生成三类脚手架根据不同的使用环境和场景,集成了一些开箱即用的功能:如界面框架...

一,前言上一篇,使用Vue-cli3对新项目做了初始化创建本篇进行UI组件库的集成,选用ant-design-vue二,为什么选择ant-design-vue组件丰富,目前有55个组件阿里大厂维护测试覆盖率高基于Ant Design设计UI组件库设计思想与React对应,对技术选型和设计友好三,简单安装和使用ant-design-vue安装依赖:npm i ant-d...

一,前言前两篇对项目进行了初始化,集成了UI组件库AntDesginVue,实现了按需加载这一篇开始使用AntDesginVue组件库,创建vue=framework-admin的主界面布局二,布局设计一般admin管理平台大多采用左侧菜单栏+右侧上中下的结构AntDesginVue组件库也为我们提供这样的界面布局选择布局模板:参考链接 : https://vue.ant.de...

一,前言上一篇,添加了vue-framework-admin后台管理页面的布局在后台管理的布局中,当左侧菜单被点击时,内容区域需切换至对应页面进行显示这就需要路由,本篇对项目添加路由配置,包括菜单路由和登录注册404页面路由二,删除无用代码设置路由,使内容显示区域根据选中菜单进行切换内容部分由<Content /> 改为<router-view>,并删除Co...

一,前言上一篇,为vue-framework-admin添加了路由配置,实现了点击菜单切换内容显示本篇将实现根据路由配置动态生成菜单功能首先菜单(路由)的层级是不固定的,有可能是1级2级3级或更多其次,并不是所有路由都会渲染都菜单上:如登录注册404,订单详情,分布表单等这就需要对路由配置信息进行递归处理,并跳过不需要显示在菜单中的路由配置项,另外,菜单的图标,名称也都需要在路由中...

一,前言上一篇,实现了根据路由配置动态生成菜单,目前点击菜单能够实现内容区视图切换显示但面包屑组件尚未实现与路由联动和点击跳转的效果面包屑:主要起到一个导航的功能,可以告诉用户当前在哪里,并且可以实现快速跳转功能本篇将对面包屑组件进行完善,实现面包屑与菜单路由的联动及跳转功能二,实现思路主要利用$route.matched,获取路由的匹配过程,并在面包屑组件上渲染显示,添加跳转功...

一,前言目前后台管理平台框架已经基本搭建好了前面我们完成了后台管理平台框架的布局,路由,菜单,以及根据路由配置动态递归的生成菜单后面要做登录登出功能,登录功能需要使用Axios访问API(这里会用到mock做本地假接口的调用)登录后的用户信息还需要保存到Vuex中,页面的用户信息和头像数据需要取自Vuex还有后台管理特有的角色和权限控制,分为菜单权限和细粒度更高的事件权限,以及权限管理...

一,前言上一篇,完善了Header组件,添加了用户信息的显示和退出功能用户信息(昵称+头像)都是写死的,线上应用肯定是通过登录获取到用户信息这一篇,制作一个简单的登录页面,模拟接口异步调用(用户信息写死json对象)将用户信息暂时保存到本地存储localStorge中,Header组件读取用户信息显示登出时,清空localStorge本地存储,登出状态不能通过URL直接进入主界面在路...

一,前言上一篇为vue-framework-admin制作了了登录页面,模拟登录接口api的异步调用将用户信息保存到localStorge中.登录成功进入首页Header显示localStorge数据退出时,重载当前页面,触发路由守卫,根据用户登录状态决定跳转页面首先,登录接口是使用promise模拟的,目前虽然真实没有后台API,但可以使用mock其次,真实API或使用mock都需要...

一,前言上一篇,封装了Axios并使用mockjs模拟了登录接口的调用项目在不同环境下是存在差异的,例如:生产环境和测试环境的BaseUrl地址不同本地调试接口时,需要解决浏览器跨域问题为了处理好各个环境间的差异,就需要做多环境配置本篇,实现项目的多环境配置及配置proxy代理解决浏览器跨域问题二,多环境设计由于本项目暂未提供接口API,且无prd部署环境为了模拟多环境,...

本篇将使用Vuex对vue-framework-admin项目做状态管理1,为什么需要状态管理2,Vuex的运行机制3,Vuex的配置和使用4,Vuex的模块化最佳实践5,Vuex的持久化6,代码下载

一,前言有一段时间没有更新<<基于Vue的后台管理模板>>专栏了看了一眼,最近的一次更新还是在8月23日,算起来也间隔了1个多月中间这段时间一直在看TypeScript,做了些笔记,并做了一次TS的学习分享目前是十一长假期间,在TS告一段落后,回过头来继续连载后台管理模板我又熟悉了一遍之前的更新进度:创建项目->集成UI库实现按需加载->创建后台管...

一,前言上一篇,介绍了ECharts封装,响应式,刷新问题及vue-echarts的使用,以及IE兼容性问题这一篇,就来着重解决目前项目存在的IE兼容性问题二,IE兼容性问题Vue官方文档描述支持IE8+,因为Vue使用了IE8无法模拟的ECMAScript 5 特性1)IE浏览器的兼容性问题多数由于ES6语法不支持导致,如 Promise,Symbol IE8不识别vue中的...

一,前言上一篇解决了IE浏览器兼容问题到目前已经更新了13篇,但对于开发工具的配置和使用还只字未提一方面开发工具越早启用越好,有利于代码规范和开发体验的优化而不写一些有问题的代码就办法表现出开发工具的效果和好处到目前位置,其实已经有意无意的加入了一些"有问题"的代码本篇,就来介绍Vue开发中实用且能够有效提高开发效率,保证编码规范的工具二,常用开发工具首先就是IDE的选择,随...