A magical vue admin https://panjiachen.github.io/vue-element-admin
MIT License
Bot releases are visible (Hide)
Published by PanJiaChen over 4 years ago
在新版本中将原来的 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']
}
}
}
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 of
has 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
Published by PanJiaChen over 4 years ago
meta: {
title: 'Example',
icon: 'example'
icon: 'el-icon-s-help' //demo
},
param2Obj
函数在参数中出现 ==
时的 bug (#3100 by @mayunhai)v-permission
不支持动态设置权限的 bug (#3251)preload
,提高首页加载速度(https://github.com/PanJiaChen/vue-element-admin/commit/0bf61aac535b7799a0f17573741fee507003a7e4)@babel/register
(https://github.com/PanJiaChen/vue-element-admin/commit/d3bd933a8e314e5e51d48125dbcda9e3df8ee673)package.json
中没有依赖到的 showdown
(https://github.com/PanJiaChen/vue-element-admin/commit/7702b3d809a312feb2a9eb7c7a70fef3ea0628b8 by @Silentdoer)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)v-permission
does not support setting permissions dynamically (#3251)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)showdown
which is not dependent on package.json
(https://github.com/PanJiaChen/vue-element-admin/commit/7702b3d809a312feb2a9eb7c7a70fef3ea0628b8 by @Silentdoer)element-ui
to version 2.13.2Published by PanJiaChen over 4 years ago
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 写法
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
plop
store 模板,一键创建空 store 模板文件 (#2805 by @monkeycf)CodeSandbox
,在线运行代码 (#2976)autocomplete
拼写错误 (#2191 by @mgbq)Dashboard
debounce bug (#2597 by @mayunhai)TagsView
没有清除的 bug (#2632)TagsView
bug (#2634, #2649)Charts
在被keep-alive
后,resize 的 bug (#2922)UserCard
中的拼错误 (#3056 by @echofly)parseTime
函数在 Safari
中的 bug (#3066 by @Aisen60)parseTime
函数在在传入空值时的 bug (#3038 by @c-f-cooper)withCredentials
,有跨域需求的请自行设置 (https://github.com/PanJiaChen/vue-element-admin/commit/9538d1b766ab897f0fb3cc38d05be6884be7e6e2)axios
版本,修复安全漏洞 (https://github.com/PanJiaChen/vue-element-admin/commit/018c20a3f6f695be9de28aa651d2c1cc64c13cee)element-ui
至 2.13.0
版本jsconfig.json
文件,以便让编辑器支持文件点击跳转 (#2609 by @FrancisSano)file-saver
的引入方式,通过 import
的方式引入 (#2347 by @gaoshijun1993)mock-server
(#2966 by @roblues)vue-cli
默认的 source-map
以提高编译速度 (#3097)TagsView
,当滚动时隐藏右键按钮 (#3118 by @AiMe1991)plop
store template (#2805 by @monkeycf)CodeSandbox
, could run code online (#2976)autocomplete
(#2191 by @mgbq)Dashboard
debounce bug (#2597 by @mayunhai)TagsView
was not cleared when logging out (#2632)TagsView
bugs (#2634, #2649)UserCard
(#3056 by @echofly)parseTime
function in Safari
(#3066 by @Aisen60)parseTime
function when passing null value (#3038 by @c-f-cooper)withCredentials
, please set it yourself if you have cross-domain requirements (https://github.com/PanJiaChen/vue-element-admin/commit/9538d1b766ab897f0fb3cc38d05be6884be7e6e2)axios
version, fix security holes (https://github.com/PanJiaChen/vue-element-admin/commit/018c20a3f6f695be9de28aa651d2c1cc64c13cee)element-ui
to 2.13.0
versionjsconfig.json
file to let the editor support file click and jump (#2609 by @FrancisSano)file-saver
, importing through import
(#2347 by @gaoshijun1993)mock-server
(#2966 by @roblues)vue-cli
default source-map
in development environment to improve compilation speed (#3097)TagsView
, hide right button when scrolling (#3118 by @AiMe1991)Published by PanJiaChen over 5 years ago
keep-alive
中的 bug(#2119)autoprefixer
到 devDependencies
,避免有些情况下漏装的问题(#2097 by @bpzhang )request.js
的错误处理 (#2160 @gaoshijun1993 )127.0.0.1
,避免修改了localhost
的指向后,代理失效的问题(#2142)language
选项(#2159)keep-alive
(#2119)autoprefixer
to devDependencies
to avoid the problem of missing(#2097 by @bpzhang )request.js
(#2160 @gaoshijun1993 )127.0.0.1
, to avoid some people modifying the localhost
pointer, the proxy is invalid(#2142)language
option(#2159)Published by PanJiaChen over 5 years ago
vue-devtool
中出现 bug(#2066 )MockJS
模拟数据。若有需求请自己移除。(4ef0782189004e98cf427fd5eafc908d0a14a7d6)redirect
的时候,面包屑不在变化(#2086 )。postcss.config.js
instead of .postcssrc.js
,与vue-cli
保持一致vue-devtool
(#2066 )MockJS
is used to simulate data in a production environment. Please remove it if you need it.(4ef0782189004e98cf427fd5eafc908d0a14a7d6)redirect
, the breadcrumbs are not changing (#2086).postcss.config.js
instead of .postcssrc.js
, consistent with vue-cli
Published by PanJiaChen over 5 years ago
title
修改为动态的,会随着页面的变化而变化,不再是写死的 (#1910 by @ren8179 )日语
(#1999 by @linzhengen )v-el-height-adaptive-table
指令的 bug (#1924 by @yuntao1997 )display_time
一直是 NaN
的 bug (#2001 by @dolonfly )JSDoc
注释 (#1883 by @tuandm )tabindex
使其支持 tab 切换 (#1933 by @toruksmakto )fixedHeader
情况下滚动效果 (e8e6c7e79c2488779090f00efc5f1bbfcb04bd5b)Breadcrumb
的参数名 noredirect
=> noRedirect
(4ee334a)title
of the page is now dynamic and will change as the page changes. It is no longer written dead. (#1910 by @ren8179 )Japanese
lang (#1999 by @linzhengen )v-el-height-adaptive-table
directive (#1924 by @yuntao1997 )display_time
which has been a bug for NaN
(#2001 by @dolonfly )JSDoc
comment to global function (#1883 by @tuandm )tabindex
to support tab switching. (#1933 by @toruksmakto )fixedHeader
is set (e8e6c7e79c2488779090f00efc5f1bbfcb04bd5b)Breadcrumb
noredirect
=> noRedirect
(4ee334a)Published by PanJiaChen over 5 years ago
vuex
模块为自动导入(#1815 by @Estelle00 )mock-server
支持热更新 (#1850 )activeMenu
,可手动配置路由需要高亮的侧边栏(#1833 )scrollbar
滚动慢和定位问题(#1853 )Guide
demo 页面的 bug (https://github.com/PanJiaChen/vue-element-admin/commit/184125bdd369bf3c2dec4b182ae42993dfb5b7bc , https://github.com/PanJiaChen/vue-element-admin/commit/25414f1fd90ac7686b3a2866b5ae0defd6294022)FixedHeader
情况下,页面布局的 bug(https://github.com/PanJiaChen/vue-element-admin/commit/a8c6e11ee66e5c9902a09bddf6d8aecccd9866ad)tags-view
关闭最后一个页面是首页的时候出现的 bug(#1866 by @de1ck )tags-view
的层级问题(https://github.com/PanJiaChen/vue-element-admin/commit/c923726464505213608bd8e334b768a72777b612)error-log
的层级问题(#1844 by @ansonhorse )drag-list
demo 在 Firefox 下的 bug (#1841)cnpm
安装模块后,optimization.splitChunks 失效的问题(https://github.com/PanJiaChen/vue-element-admin/commit/c833cb6efabdef7f2d1241d1b204e2701f8a04c1)Sidebar
在设置了alwaysShow: true
外链跳转失效问题 (#1870)vuex
module to auto import(#1815 by @Estelle00 )mock-server
support for hot reload (#1850 )activeMenu
to manually configure the route to highlight in the sidebar (#1833)scrollbar
scrolling slow and positioning problem(#1853 )Guide
demo page(https://github.com/PanJiaChen/vue-element-admin/commit/184125bdd369bf3c2dec4b182ae42993dfb5b7bc , https://github.com/PanJiaChen/vue-element-admin/commit/25414f1fd90ac7686b3a2866b5ae0defd6294022)FixedHeader
set(https://github.com/PanJiaChen/vue-element-admin/commit/a8c6e11ee66e5c9902a09bddf6d8aecccd9866ad)tags-view
the bug that occurred when closing the last page was the home page (#1866 by @de1ck )tags-view
z-index(https://github.com/PanJiaChen/vue-element-admin/commit/c923726464505213608bd8e334b768a72777b612)error-log
z-index(#1844 by @ansonhorse )drag-list
demo in Firefox (#1841)cnpm
(https://github.com/PanJiaChen/vue-element-admin/commit/c833cb6efabdef7f2d1241d1b204e2701f8a04c1)Sidebar
setting alwaysShow: true
external link bug(#1870)Published by PanJiaChen over 5 years ago
v4.0版本正式发布。
基于 vue-cli@3
进行构建
调整了项目的目录结构
使用了最新的 eslint-plugin-vue@5
,重新格式化了代码
现在可以在不刷新页面的情况下 remove routes
增加了 jest 单元测试
新增了 npm run preview
、 npm run test:uni
、 npm run new
指令
使用了新的 mock 方式,解决了之前 mock 若干问题
vuex
启用了 模块化 namespaced
新增了 settings.js
,让 sidebarLogo、fixedHeader、TagsViews 等都可配置
新增了 sidebar logo
重构了侧边栏 sidebar 代码逻辑,并且优化了样式和展开收起动画,同时让二级菜单内容过多时支持滚动
使用了 async/await 替代了部分 promise 代码
增加了 header-search 组件 https://github.com/PanJiaChen/vue-element-admin/pull/1591
增加了 fearure[TagsView]: add affix porperty https://github.com/PanJiaChen/vue-element-admin/pull/1577
移除了 tree-table 组件。 element-ui
v2.7.0 开始支持tree-table
,所以不再独立维护。
增加了权限配置 demo
增加了导出多级表头 excel 的 demo
feature[Directive]: add auto-height table directive
keep-alive
,但当三级路由嵌套的情况下,支持的并不好。之后探索一个更好的解决方案。e2e-test
的例子。The v4.0 version was officially released.
Build based on vue-cli@3
Adjusted the directory structure
Reformatted the code with the latest eslint-plugin-vue@5
You can now remove routes without refreshing the page.
Updated [email protected]
Added jest unit test
Added npm run preview
, npm run test:uni
, npm run new
directive
Using the new mock method, solved some problems with the previous mock
vuex
use namespaced
Added settings.js
to make sidebarLogo, fixedHeader, TagsViews, etc. configurable
Add sidebar logo
Refactored the sidebar code logic and optimized the style and unfolding the animation
Use Async/await
Add header-search https://github.com/PanJiaChen/vue-element-admin/pull/1591
Add fearure[TagsView]: add affix porperty https://github.com/PanJiaChen/vue-element-admin/pull/1577
Remove tree-table. element-ui
v2.7.0 started to support tree-table
, so it is no longer maintained independently.
Added permission configuration demohttps://github.com/PanJiaChen/vue-element-admin/commit/c963f56686b9731a517a17c4d562bc3da0fa3771
Added demo to export multi-level header excel
feature[Directive]: add auto-height table directive https://github.com/PanJiaChen/vue-element-admin/pull/1702 (by @yuntao1997 )
keep-alive
, but when the three-level routing is nested, the support is not good. Then explore a better solution.e2e-test
as appropriate.webpack5
still solves a lot of pain points before, the upgrade will be upgraded after the official version is released.Published by PanJiaChen over 5 years ago
注意:这是 v4.0
版本之前最后的一个版本更新了。之后除非有重大bug,不然 v3.x.x
版本将不再继续迭代。
Note: This is the last version update before the v4.0
version. After that, unless there is a major bug, the v3.x.x
version will not continue to iterate.
Published by PanJiaChen over 5 years ago
基于 vue-cli@3
进行构建
调整了项目的目录结构
使用了最新的 eslint-plugin-vue@5
,重新格式化了代码
增加了 jest 单元测试
新增了 npm run preview
、 npm run test:uni
、 npm run new
指令
使用了新的 mock 方式
vuex 启用了 模块化 namespaced
新增了 settings,让 sidebarLogo、fixedHeader、TagsViews 等都可配置
新增了 sidebar logo
重构了侧边栏 sidebar 代码逻辑,并且优化了样式和展开收起动画,同时让二级菜单内容过多时支持滚动
使用了 async/await 替代了部分 promise 代码
增加了 header-search 组件 https://github.com/PanJiaChen/vue-element-admin/pull/1591
增加了 fearure[TagsView]: add affix porperty https://github.com/PanJiaChen/vue-element-admin/pull/1577
重构了 tree-table 组件 (by @Liugq5713)
增加了权限配置 demo https://github.com/PanJiaChen/vue-element-admin/commit/c963f56686b9731a517a17c4d562bc3da0fa3771 (by @gaoshijun1993 )
增加了导出多级表头 excel 的 demo https://github.com/PanJiaChen/vue-element-admin/commit/763b31d915be67aecc8f24283d4898ccded8b55b (by @llccing)
feature[Directive]: add auto-height table directive https://github.com/PanJiaChen/vue-element-admin/pull/1702 (by @yuntao1997 )
总结来说:就是 4.0 版本改了很多东西,是一次不兼容更新。
Published by PanJiaChen almost 6 years ago
vue-router
来修复 url 地中含有中文字符的 bug #1362<el-form-item>
wrapper for validate #1428 (by @jingyulong)vue-router
to fixed url path for non ascii urls #1362<el-form-item>
wrapper for validate #1428 (by @jingyulong)Published by PanJiaChen almost 6 years ago
🎉 feature: 新增利用 table 表头排序的 demo (#1236)
🎉 feature: 新增可拖拽 select 组件 (#1249)
🐛 fixed[TagsView]: 修复 openMenu 在边界情况下的展示问题 (#1256)
下一次发布应该就是 v4.0 版本了,完全基于 [email protected] 进行构建,并添加了配置项功能,用户可自由选择是否需要 TagsView,默认语言等功能,并开始逐步补齐单元测试。
v3.9.x 版本应该还会并行维护一段时间,照顾那些暂时不能升级的用户
🎉 feature: add an example of sort data by table (#1236)
🎉 feature: add drag select component (#1249)
🐛 fixed[TagsView]: fix openMenu boundary display bug (#1256)
The next release should be v4.0 version, built entirely based on [email protected], and added configuration, users can freely choose whether they need TagsView, default language and other settings, and start to gradually complete unit test.
The v3.9.x version should also be maintained in parallel for a period of time, taking care of users who are temporarily unable to upgrade.
Published by PanJiaChen about 6 years ago
Published by PanJiaChen about 6 years ago
templateParameters
来简化 index.html 模板 #1156 (by @happystory )templateParameters
to refine index.html #1156 (by @happystory )Published by PanJiaChen about 6 years ago
svgo
script to optimize svg (doc) #1096permission.js
logic #1067 (by @inklake )tinymce
components 87b319dsvgo
指令来优化 svg (文档) #1096permission.js
逻辑 #1067 (by @inklake )Published by PanJiaChen about 6 years ago
Published by PanJiaChen about 6 years ago
hidden:true
(#880)hidden:true
时候出现的bug (#880)The next version will upgrade webpack@4
and vue-loader@15
Published by PanJiaChen over 6 years ago
lint-staged
#818el-col
:span #841 by @ZYSzyslint-staged
进行提交格式化校验 #818el-col
:span #841 by @ZYSzys