摘要：
什么是Getters?它有什么作用？ Getters 我们可以理解为store仓库的一个计算属性，它的作用主要是用来派生出一些新的状态。比如我们要把state状态的数据进行一次映射或者筛选，再把这个结果重新计算并提供给组件使用。举个例子： store.js 此时，getters 会暴露出一个stor 阅读全文
摘要：
接口请求格式定义 前台显示需要后台数据，我们这里先把前后端交互接口定义好，没有后台的时候，也方便用mock模拟。 接口定义遵循几个规范： 1. 接口按功能模块划分。 系统登录：登录相关接口 用户管理：用户管理相关接口 机构管理：机构管理相关接口 角色管理 ： 角色管理相关接口 菜单管理 ： 菜单管理 阅读全文
摘要：
使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的，但是因为组件封装的原因，隐藏按钮在头部组件，而导航菜单在导航菜单组件，这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改，导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷 阅读全文
摘要：
组件封装 为了避免组件代码的臃肿，这里对主要的功能部件进行封装，保证代码的模块化和简洁度。 组件结构 组件封装重构后，试图组件结构如下图所示 代码一览 Home组件被简化，包含导航、头部和主内容三个组件。 Home.vue <template> <div class="container"> <!- 阅读全文
摘要：
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 阅读全文
摘要：
我们在使用 npm install 安装模块的模块的时候 ，一般会使用下面这几种命令形式： 那么问题来了，在项目中我们应该使用四个命令中的哪个呢？这个就要视情况而定了。下面对这四个命令进行对比，看完后你就不再这么问了。 npm install moduleName 命令 1. 安装模块到项目node 阅读全文
摘要：
国际化支持 1.安装依赖 执行以下命令，安装 i18n 依赖。 npm install vue-i18n --save 2.添加配置 2.1 在 src 下新建 i18n 目录，并创建一个 index.js。 index.js import Vue from 'vue' import VueI18n 阅读全文
摘要：
完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面，放置一个登录界面表单，包含账号密码输入框和登录重置按钮。 <template> <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" 阅读全文
摘要：
封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。 封装要点 统一 url 配 阅读全文
摘要：
1、安装element-ui依赖。 npm i element-ui -S 2、项目导入 按照安装指南，在 main.js 中引入 element，引入之后，main.js 内容如下： 项目引入之后，我们在原有的 HelloWorld.vue 页面中加入一个 element 的按钮，测试一下。 页面 阅读全文