摘要：
使用第三方图标库 用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。 Font Awesome Font Awesome 提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括 阅读全文
posted @ 2019-11-18 15:43
whoamimy
阅读(702)
评论(0)
推荐(0)
摘要：
动态加载菜单 之前我们的导航树都是写死在页面里的，而实际应用中是需要从后台服务器获取菜单数据之后动态生成的。 我们在这里就用上一篇准备好的数据格式Mock出模拟数据，然后动态生成我们的导航菜单。 接口模块化 我们向来讲究模块化，之前接口都集中在，interface.js，我们现在把它改名为 api. 阅读全文
posted @ 2019-11-18 15:42
whoamimy
阅读(942)
评论(0)
推荐(0)
摘要：
接口请求格式定义 前台显示需要后台数据，我们这里先把前后端交互接口定义好，没有后台的时候，也方便用mock模拟。 接口定义遵循几个规范： 1. 接口按功能模块划分。 系统登录：登录相关接口 用户管理：用户管理相关接口 机构管理：机构管理相关接口 角色管理 ： 角色管理相关接口 菜单管理 ： 菜单管理 阅读全文
posted @ 2019-11-18 15:41
whoamimy
阅读(607)
评论(0)
推荐(0)
摘要：
使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的，但是因为组件封装的原因，隐藏按钮在头部组件，而导航菜单在导航菜单组件，这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改，导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷 阅读全文
posted @ 2019-11-18 15:40
whoamimy
阅读(212)
评论(0)
推荐(0)
摘要：
组件封装 为了避免组件代码的臃肿，这里对主要的功能部件进行封装，保证代码的模块化和简洁度。 组件结构 组件封装重构后，试图组件结构如下图所示 代码一览 Home组件被简化，包含导航、头部和主内容三个组件。 Home.vue <template> <div class="container"> <!- 阅读全文
posted @ 2019-11-18 15:40
whoamimy
阅读(273)
评论(0)
推荐(0)
摘要：
Vue笔记：使用 vuex 管理应用状态 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 阅读全文
posted @ 2019-11-18 15:38
whoamimy
阅读(175)
评论(0)
推荐(0)
摘要：
自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 yarn add element-theme --dev 2.安装chalk主题 安装白垩主题，可以从 npm 安装或者从 阅读全文
posted @ 2019-11-18 15:28
whoamimy
阅读(313)
评论(0)
推荐(0)
摘要：
国际化支持 1.安装依赖 执行以下命令，安装 i18n 依赖。 yarn add vue-i18n $ yarn add vue-i18n yarn add v1.9.4 warning package-lock.json found. Your project contains lock file 阅读全文
posted @ 2019-11-18 15:26
whoamimy
阅读(176)
评论(0)
推荐(0)
摘要：
完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面，放置一个登录界面表单，包含账号密码输入框和登录重置按钮。 <template> <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" 阅读全文
posted @ 2019-11-18 15:25
whoamimy
阅读(338)
评论(0)
推荐(0)
摘要：
问题背景 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined。 如下图所示，我们有一个 login 方法，希望在登录成功之后路由到主页，但通过 this.$router 获取路由器出错。 解决方案 使用箭头函数替代普通函数，ES6中的箭头函数 “=>” 内部 阅读全文
posted @ 2019-11-18 15:24
whoamimy
阅读(214)
评论(0)
推荐(0)
浙公网安备 33010602011771号