2019年4月11日
摘要：
使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的，但是因为组件封装的原因，隐藏按钮在头部组件，而导航菜单在导航菜单组件，这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改，导航菜单需要根据收缩状态来设置导航栏的宽度。这样就需要在收缩状态变更时刷 阅读全文
posted @ 2019-04-11 22:20
houJINye
阅读(878)
评论(0)
推荐(0)
摘要：
组件封装 为了避免组件代码的臃肿，这里对主要的功能部件进行封装，保证代码的模块化和简洁度。 组件结构 组件封装重构后，试图组件结构如下图所示 代码一览 Home组件被简化，包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言 阅读全文
posted @ 2019-04-11 22:19
houJINye
阅读(503)
评论(0)
推荐(0)
摘要：
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 阅读全文
posted @ 2019-04-11 22:18
houJINye
阅读(297)
评论(0)
推荐(0)
摘要：
自定义主题 命令行主题工具 1.安装主题工具 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 2.安装chalk主题 安装白垩主题，可以从 npm 安装或者从 GitHub 拉取最新代码，这里从 npm 安装。 3.初 阅读全文
posted @ 2019-04-11 22:17
houJINye
阅读(896)
评论(0)
推荐(0)
摘要：
国际化支持 1.安装依赖 执行以下命令，安装 i18n 依赖。 2.添加配置 2.1 在 src 下新建 i18n 目录，并创建一个 index.js。 index.js 2.2 在 assets 目录下面创建连个多语言文件。 zh.json en.json 2.3 在 main.js 中引入 i1 阅读全文
posted @ 2019-04-11 22:16
houJINye
阅读(552)
评论(0)
推荐(0)
摘要：
完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面，放置一个登录界面表单，包含账号密码输入框和登录重置按钮。 1.2 稍微调整一下界面样式 1.3 添加页面组件显示规则和操作响应，其中登录成功后，把登录用户信息存储到本地会话，用于配置路由跳转目标。 1.4 阅读全文
posted @ 2019-04-11 22:16
houJINye
阅读(793)
评论(0)
推荐(0)
摘要：
问题背景 在vue中使用axios做网络请求的时候，会遇到this不指向vue，而为undefined。 如下图所示，我们有一个 login 方法，希望在登录成功之后路由到主页，但通过 this.$router 获取路由器出错。 解决方案 使用箭头函数替代普通函数，ES6中的箭头函数 “=>” 内部 阅读全文
posted @ 2019-04-11 22:15
houJINye
阅读(453)
评论(0)
推荐(0)
摘要：
封装 axios 模块 封装背景 使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的代码冗余，让代码变得越来越难维护。所以我们在这里先对 axios 进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。 封装要点 统一 url 配 阅读全文
posted @ 2019-04-11 22:14
houJINye
阅读(734)
评论(0)
推荐(0)
摘要：
技术基础 开发之前，请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex，vue.js 应用状态管理库 Element，饿了么提供的UI框架 开发环境 Node JS（npm） Visual Studio Code（前端IDE） 阅读全文
posted @ 2019-04-11 22:13
houJINye
阅读(281)
评论(0)
推荐(0)
浙公网安备 33010602011771号