a vue2.0 minimal admin template
在新版本中将原来的 vue-cli@3 升级为 vue-cli@4。
主要是为了解决：
npm run dev 会自动开两个 tab https://github.com/PanJiaChen/vue-element-admin/issues/2944
npm run build:prod 页面白屏的问题 https://github.com/PanJiaChen/vue-element-admin/issues/3271
vue-cli 升级也非常简单，基本无需自己操作说明， 可参照 https://cli.vuejs.org/migrating-from-v3/
@vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue upgrade
脚本就会自动帮你进行升级
有一点需要额外注意，在新版本中废弃了通过VUE_CLI_BABEL_TRANSPILE_MODULES来控制懒加载
在vue-cli@3时代，使用VUE_CLI_BABEL_TRANSPILE_MODULES是 ok 的，但其实也是脆弱的，就比如在vue-cli@4时，vue-cli 引入babel-plugin-dynamic-import-node的逻辑就发生了变化，需要VUE_CLI_BABEL_TRANSPILE_MODULES和VUE_CLI_BABEL_TARGET_NODE同时为 true 时才会生效，所以只要 vue-cli 的判断逻辑发生了变化，我们都需要做相对应的改动，或非常被动和耦合。所以我们在vue-cli@4版本中，不再通过VUE_CLI_BABEL_TRANSPILE_MODULES:true来设置，而是通过手动引入'babel-plugin-dynamic-import-node'的方式，具体见下一部分。
在 .env.development文件中不在需要配置VUE_CLI_BABEL_TRANSPILE_MODULES = true，删除即可。
在命令行执行 npm install babel-plugin-dynamic-import-node -S -D
在babel.config.js 中添加插件
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
env: {
development: {
plugins: ['dynamic-import-node']
}
}
}
具体 commit：https://github.com/PanJiaChen/vue-element-admin/pull/3028/commits/2ea998f91d889480821468de86df9bf8defbb5f0
Upgrade the original vue-cli @ 3 to vue-cli @ 4 in the new version.
Mainly to solve:
-npm run dev will automatically open two tags https://github.com/PanJiaChen/vue-element-admin/issues/2944 -npm run build: white screen issue on prod page https://github.com/PanJiaChen/vue-element-admin/issues/3271
The upgrade of vue-cli is also very simple, basically you don’t need to operate your own instructions, you can refer to https://cli.vuejs.org/migrating-from-v3/
@vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue upgrade
The script will automatically upgrade for you
One thing needs extra attention. In the new version, the control of lazy loading via VUE_CLI_BABEL_TRANSPILE_MODULES is abandoned.
In the era of vue-cli@3, using VUE_CLI_BABEL_TRANSPILE_MODULES is ok, but it is actually fragile, as in vue-cli@4, vue-cli introduces babel-plugin-dynamic-import-node The logic ofhas changed, it needs to be VUE_CLI_BABEL_TRANSPILE_MODULES and VUE_CLI_BABEL_TARGET_NODE to be true at the same time, so as long as the judgment logic of vue-cli changes, we need to make corresponding changes, or be very passive and coupled . So in the vue-cli@4 version, we no longer set it by VUE_CLI_BABEL_TRANSPILE_MODULES: true, but by manually introducing 'babel-plugin-dynamic-import-node', see the next section for details.
No need to configure VUE_CLI_BABEL_TRANSPILE_MODULES = true in the .env.development file, just delete it.
Run npm install babel-plugin-dynamic-import-node -S -D
The way to add the dynamic-import-node plugin in babel.config.js, see the next section for details.
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
env: {
development: {
plugins: ['dynamic-import-node']
}
}
}
Detail commit：https://github.com/PanJiaChen/vue-element-admin/pull/3028/commits/2ea998f91d889480821468de86df9bf8defbb5f0
meta: {
title: 'Example',
icon: 'example'
icon: 'el-icon-s-help' //demo
},
param2Obj 函数在参数中出现 == 时的 bug (#3100 by @mayunhai)preload，提高首页加载速度(https://github.com/PanJiaChen/vue-element-admin/commit/0bf61aac535b7799a0f17573741fee507003a7e4)@babel/register(https://github.com/PanJiaChen/vue-element-admin/commit/d3bd933a8e314e5e51d48125dbcda9e3df8ee673)element-ui 至 2.13.2 版本meta: {
title: 'Example',
icon: 'example'
icon: 'el-icon-s-help' //demo
},
param2Obj function appears with == in the parameter (#3100 by @mayunhai)preload during webpack build to increase the homepage loading speed(https://github.com/PanJiaChen/vue-element-admin/commit/0bf61aac535b7799a0f17573741fee507003a7e4)@babel/register(https://github.com/PanJiaChen/vue-element-admin/commit/d3bd933a8e314e5e51d48125dbcda9e3df8ee673)element-ui to version 2.13.2chore: change node-sass to dart-sass(#3040 by @Cat7373 )
/deep/ 已不适用，需要使用 ::v-deep进行替换
在 v4.3.0之前本项目都是基于node-sass进行构建的，但node-sass底层依赖 libsass，导致很多用户安装的特别的困难，尤其是 windows 用户，它强制用户在windows环境中必须安装python2和Visual Studio才能编译成功。
所以为了解决这个问题，本项目在 v4.3.0修改为dart-sass进行构建，它能在保证性能的前提下大大简化用户的安装成本。通过这个 issue下面相关的评论就可以知道，安装 node-sass 是多么麻烦的一件事。
这里选择使用dart-sass还有一个更主要的原因，sass官方已经将dart-sass作为未来主要的的开发方向了，有任何新功能它都是会优先支持的，而且它已经在社区里稳定运行了很长的一段时间，基本没有什么坑了。dart-sass之所以容易安装，主要是因为它会被编译成纯 js，这样就可以直接在的 node 环境中使用。虽然这样它的运行速度会比基于 libsass的慢一些些，但这些速度的差异几乎可以忽略不计。整个社区现在都在拥抱dart-sass，我们没有理由拒绝！而且它的确大大简化了用户的安装成本。
目前vue-cli在选择sass预处理的时候也会默认优先使用dart-scss，相关 pr
相关的说明可以见该篇文章： Announcing Dart Sass
具体 dart-sass性能评测可见：Perf Report
升级也非常的简单，只需要两个步骤
npm uninstall node-sass
npm install sass -S -D
具体可见该： Pull Request
替换 node-sass 之后有一个地方需要注意，就是它不再支持之前 sass 的那种 /deep/ 写法，需要统一改为 ::v-deep 的写法。相关： issue
具体 demo：
.a {
/deep/ {
.b {
color: red;
}
}
}
/* 修改为 */
.a {
::v-deep {
.b {
color: red;
}
}
}
不管你是否使用dart-sass，我都是建议你使用::v-deep的写法，它不仅兼容了 css 的>>>写法，还兼容了 sass /deep/的写法。而且它还是 vue 3.0 RFC 中指定的写法。
而且原本 /deep/ 的写法也本身就被 Chrome 所废弃，你现在经常能在控制台中发现 Chrome 提示你不要使用/deep/的警告。
更多： scope css 写法
chore: change node-sass to dart-sass(#3040 by @Cat7373 )
/deep/ is no longer applicable, it needs to be replaced with ::v-deep
Before v4.3.0, this project was built based on node-sass, but node-sass low-level dependencies libsass, resulting in many users installing Especially difficult for Windows users, it forces users to install python2 and Visual Studio in the windows environment to compile successfully.
So in order to solve this problem, this project was modified to build dart-sass in v4.3.0, it can guarantee performance Under the premise of greatly simplifying the user's installation costs. Through this issue the relevant comments below can be known, install` Node-sass is such a troublesome thing.
There is a more important reason for choosing to use dart-sass here. Officially, sass has taken dart-sass as the main development direction in the future. Any new features will be supported first, and it It has been running steadily in the community for a long time, and there are basically no pits. The main reason why dart-sass is easy to install is because it will be compiled into pure js, so that it can be used directly in the node environment. Although its running speed will be slower than that based on libsass, the difference in these speeds is almost negligible. The entire community is now embracing dart-sass, and we have no reason to refuse! And it does greatly simplify the user's installation costs.
Currently, vue-cli will also prefer to use dart-scss by default when selecting sass preprocessing, related: pr
Related instructions can be found in this article: Announcing Dart Sass
Specific dart-sass performance evaluation can be seen: Perf Report
The upgrade is also very simple, requiring only two steps
npm uninstall node-sass
npm install sass -S -D
The upgrade can also be seen in detail: Pull Request is simple and only requires two steps
One thing to note after replacing node-sass is that it no longer supports the /deep/ writing style of sass before, and it needs to be changed to the writing style of ::v-deep. Related: issue
Concrete demo:
.a {
/deep/ {
.b {
color: red;
}
}
}
/* change into */
.a {
::v-deep {
.b {
color: red;
}
}
}
Regardless of whether you use dart-sass or not, I suggest you use ::v-deep notation, which is not only compatible with the css >>> notation, but also compatible with sass /deep/ . And it's the way of writing specified in vue 3.0 RFC.
And the original writing of /deep/ itself was abandoned by Chrome. You can often find a warning in the console that Chrome reminds you not to use /deep/.
More: scope css writing
mock.js to instead of easy-mock
This project originally used easy-mock to simulate data,but its official service is very unstable, and you can build your own service if you need it.
So here I use Mock.js for local emulation, it will intercept your request, so you won't see the request in the network.
If you remove ../mock it will automatically request easy-mock data.
Synchronized vue-element-admin 's code. Detail see: PanJiaChen/vue-element-admin/releases