Releases · PanJiaChen/vue-admin-template

21 Jun 14:01

PanJiaChen

4.4.0

bbabeda

4.4.0 Update to vue-cli@4 Latest

Latest

在新版本中将原来的 vue-cli@3 升级为 vue-cli@4。
主要是为了解决：

npm run dev 会自动开两个 tab PanJiaChen/vue-element-admin#2944
npm run build:prod 页面白屏的问题 PanJiaChen/vue-element-admin#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

脚本就会自动帮你进行升级

⚠️ Breaking Changes

有一点需要额外注意，在新版本中废弃了通过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'的方式，具体见下一部分。

vue-cli@4

在 .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：PanJiaChen/vue-element-admin@2ea998f

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 PanJiaChen/vue-element-admin#2944 -npm run build: white screen issue on prod page PanJiaChen/vue-element-admin#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/

Install the latest version @vue/cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Then execute

vue upgrade

The script will automatically upgrade for you

⚠️ Breaking Changes

One thing needs extra attention. In the new version, the control of lazy loading via VUE_CLI_BABEL_TRANSPILE_MODULES is abandoned.

Elimination reason

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.

vue-cli@4

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：PanJiaChen/vue-element-admin@2ea998f

Assets 2

21 Jun 14:01

PanJiaChen

4.3.1

bbabeda

4.3.1

🎉 新功能

侧边栏 icon 支持 el-icon，在声明路由时直接使用 icon class 即可，例如：

meta: {
      title: 'Example',
      icon: 'example'
      icon: 'el-icon-s-help' //demo
    },

🐛 修复

修复 param2Obj 函数在参数中出现 == 时的 bug (#3100 by @mayunhai)

✨ 优化

chore: 在 webpack 构建时开启preload，提高首页加载速度(PanJiaChen/vue-element-admin@0bf61aa)
refactor: 修改所有 mock 文件为 commonjs，移除@babel/register(PanJiaChen/vue-element-admin@d3bd933)
更新 element-ui 至 2.13.2 版本

🎉 Features

The sidebar icon supports el-icon, just use the icon class when declaring the route, for example:

meta: {
      title: 'Example',
      icon: 'example'
      icon: 'el-icon-s-help' //demo
    },

🐛 Bugs

Fix the bug when param2Obj function appears with == in the parameter (#3100 by @mayunhai)

✨ Optimization

chore: Turn on preload during webpack build to increase the homepage loading speed(PanJiaChen/vue-element-admin@0bf61aa)
refactor: Modify all mock files to commonjs, remove @babel/register(PanJiaChen/vue-element-admin@d3bd933)
Update element-ui to version 2.13.2

Assets 2

09 Jun 08:01

PanJiaChen

4.3.0

8f2c04e

v4.3.0 Change Node Sass to Dart Sass

⚠️ Breaking Changes

chore: 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 写法

⚠️ Breaking Changes

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

Upgrade plan

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

Not compatible

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

Assets 2

27 May 09:06

PanJiaChen

4.2.1

3d9ec1b

4.2.1

与 vue-element-admin 保持同步。

Stay in sync with vue-element-admin.

Assets 2

22 Apr 08:05

PanJiaChen

4.1.0

0be4067

4.1.0

与 vue-element-admin 保持同步。

Stay in sync with vue-element-admin.

Assets 2

22 Feb 06:04

PanJiaChen

v3.9.0

a0b46fe

v3.9.0

Add 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.

Other

Synchronized vue-element-admin 's code.
Detail see: PanJiaChen/vue-element-admin/releases

Assets 2

20 Aug 08:08

PanJiaChen

v3.8.0

4889c17

v3.8.0

Detail see: https://github.com/PanJiaChen/vue-element-admin/releases

Assets 2

02 May 10:03

PanJiaChen

v3.6.0

93f2896

v3.6.0

Detail see: https://github.com/PanJiaChen/vue-element-admin/releases

Assets 2

30 Nov 03:44

PanJiaChen

v3.0.0

bb0b37e

v3.0.0

https://github.com/PanJiaChen/vue-element-admin/releases

Assets 2

30 Aug 10:15

PanJiaChen

v1.0.0

682841a

v1.0.0

Merge pull request #13 from PanJiaChen/feature/refactor

Feature/refactor

Assets 2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

⚠️ Breaking Changes

废弃原因

vue-cli@4

⚠️ Breaking Changes

Elimination reason

vue-cli@4

🎉 新功能

🐛 修复

✨ 优化

🎉 Features

🐛 Bugs

✨ Optimization

⚠️ Breaking Changes

升级方案

不兼容

⚠️ Breaking Changes

Upgrade plan

Not compatible

Releases: PanJiaChen/vue-admin-template

4.4.0 Update to vue-cli@4

⚠️ Breaking Changes

废弃原因

vue-cli@4

⚠️ Breaking Changes

Elimination reason

vue-cli@4

4.3.1

🎉 新功能

🐛 修复

✨ 优化

🎉 Features

🐛 Bugs

✨ Optimization

v4.3.0 Change Node Sass to Dart Sass

⚠️ Breaking Changes

升级方案

不兼容

⚠️ Breaking Changes

Upgrade plan

Not compatible

4.2.1

4.1.0

v3.9.0

v3.8.0

v3.6.0

v3.0.0

v1.0.0