手摸手,带你用vue撸后台系列五 | vue element admin教學
前言vue-element-admin[1]从2017.04.17提交第一个commit以来,维护至今已经有两年多的时间了了,发布了四十多个版本,收获了三万多的stars,远远的超出了自己的预期。距离上次手摸手系列教程也已经过去了很久,主要因为:作为一个个人开源项目,维持它已经很难了,所以真的没啥时间写详细的教程了,光是维护项目文档[2]就让我很头疼了。也有不少人建议我出付费教学视频,但我个人还是更愿意把这个时间投入到维护开源项目之中吧。本篇教程主要是趁着vue-element-admin发布了v4.0[3]新版本,首先来简单说一下4.0版本做了哪些改动和优化...
前言vue-element-admin[1] 从 2017.04.17提交第一个 commit 以来,维护至今已经有两年多的时间了了,发布了四十多个版本,收获了三万多的 stars,远远的超出了自己的预期。距离上次手摸手系列教程也已经过去了很久,主要因为:作为一个个人开源项目,维持它已经很难了,所以真的没啥时间写详细的教程了,光是维护项目 文档[2] 就让我很头疼了。也有不少人建议我出付费教学视频,但我个人还是更愿意把这个时间投入到维护开源项目之中吧。
本篇教程主要是趁着vue-element-admin发布了 v4.0[3] 新版本,首先来简单说一下4.0版本做了哪些改动和优化。后半部分则会分享一些新的思考和一些小技巧吧。之前几篇手摸手文章都差不多两年前的了,但随着技术的不断发展迭代,很多之前的不能解决的问题也是都是有了新的解决方案的,同时也会出现一些新的问题和挑战。
4.0 做了什么首先大概说一下4.0版本做了些什么,通过 pull request[4] 可以看出这是一次比较大的升级,有大概 170 多次的 commits,200 多个文件的改动。其中最大的改变是接轨 vue 社区,直接通过 vue-cli来进行构建,省去了很多额外繁琐的配置(下文会介绍),并修改了之前 mock 数据的方案,本地改用 mock-server 来解决之前mockjs带来的各种问题。同时增加了 jest 单元测试,使用了async/await,增加了可视化配置权限,增加了自定义布局等等,优化了原先addRoutes的权限方案,支持不刷新页面更新路由等等功能。具体的可看 github release[5]。接下来我们着重来分析一下这几个功能。
vue-cli@3本身配置方面没有啥特别好说的,官方文档[6]已经写得很详细了。这次更新基本上就是基于 webpack-chain[7] 把之前的 webpack 配置迁移了一遍,因为vue-cli帮你做了很多默认配置,所有可以省去一些代码。当然这种out-of-the-box的工具利弊也很明显,它能快速上手,大部分简单场景无需任何额外配置基本就能用了。但对于复杂度高的或者自定义性强的项目来说,配置复杂度可能没有减少太多。它要求你不仅要对 webpack 或者相关工程化的东西很很熟悉,你还要...