Breaking changes made in 1.1.0-beta.1 #3020
Replies: 17 comments 51 replies
-
|
Amazing work! I cantnot wait to use this version. |
Beta Was this translation helpful? Give feedback.
-
|
Awesome! |
Beta Was this translation helpful? Give feedback.
-
|
js文件的地址是不是也换了？element plus官网上codepen的例子都不能正常运行了 |
Beta Was this translation helpful? Give feedback.
-
|
想问下什么时候能修复好呀？在等着用🥺 |
Beta Was this translation helpful? Give feedback.
-
|
@ZelinBu 正在加班加点弄 🙇 |
Beta Was this translation helpful? Give feedback.
-
|
辛苦辛苦❤️ |
Beta Was this translation helpful? Give feedback.
-
|
fixed |
Beta Was this translation helpful? Give feedback.
-
|
👍 |
Beta Was this translation helpful? Give feedback.
-
- import 'element-plus/lib/theme-chalk/display.css';
+ import 'element-plus/theme-chalk/display.css'; |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
All updates is updated in the list. Check them out |
Beta Was this translation helpful? Give feedback.
-
|
exported component name is // GlobalComponents for Volar
declare module 'vue' {
export interface GlobalComponents {
ElSubmenu: typeof import('element-plus')['ElSubMenu'];
}
}
export {}; |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, also, can you add this into the issue we created here? #162 |
Beta Was this translation helpful? Give feedback.
-
|
I don't seem to have permission |
Beta Was this translation helpful? Give feedback.
-
|
Oh sorry, I think I will work them out, could you help writing it down here? |
Beta Was this translation helpful? Give feedback.
-
Menu
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you!!! That helps a lot. |
Beta Was this translation helpful? Give feedback.
-
|
Why is the style of elementplus lost after I build it |
Beta Was this translation helpful? Give feedback.
-
|
A small number of styles still exist, such as .el-popper . |
Beta Was this translation helpful? Give feedback.
-
|
Can you open an issue and put reproducible code in there so that I can help you? |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
I could not provide any help without the code, if you are experiencing style issue https://element-plus.org/#/zh-CN/component/quickstart#yang-shi-de-yin-ru |
Beta Was this translation helpful? Give feedback.
-
|
I have imported the full css bundle |
Beta Was this translation helpful? Give feedback.
-
|
I seem to have solved the problem. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you again for reporting this. 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
I did a quick lookup, seems like |
Beta Was this translation helpful? Give feedback.
-
|
I also went to your website to see what was happening, I noticed that css files fetched seems like unavailable, I don't know what was going on since I was not able to see the source code. |
Beta Was this translation helpful? Give feedback.
-
|
The reason for not previewable should be that I used'@babel/plugin-syntax-dynamic-import' |
Beta Was this translation helpful? Give feedback.
-
|
I did not find ~element-plus/theme-chalk/index.scss Failed to compile with 1 error 下午7:39:03 |
Beta Was this translation helpful? Give feedback.
-
|
CDN 引入方式如何设置 dayjs 的语言呢？（例如 weekStart） DatePicker 的 国际化 提到了参考 国际化，但对应页面并没有说明。 有可能的话，还是希望恢复 DatePicker 的 weekStart 设置，与语言挂钩可以是默认行为，但希望能给出一种方式，覆盖默认行为。 |
Beta Was this translation helpful? Give feedback.
-
|
@et2012 CDN 引入不需要设置 dayjs 的语言，因为 dayjs 是跟 ElementPlus 一起走的。所以你可以直接设置一个语言就行。 |
Beta Was this translation helpful? Give feedback.
-
现在的情况是，DatePicker 显示为中文了，但 “每周的第一天” 是周日，我希望它是周一。 |
Beta Was this translation helpful? Give feedback.
-
|
@et2012 这个我理解了。目前的实现方式就是我们在所有的 dayjs 用的地方处理过让他使用 ElementPlus 自定义的语言。这个我们得看一下怎么做处理。兼容一下你的使用方式 @iamkun |
Beta Was this translation helpful? Give feedback.
-
@JeremyWuuuuu 大佬，我CDN引入element-plus@1.1.0-beta.20，其它正常，但dayjs的使用报错 |
Beta Was this translation helpful? Give feedback.
-
|
移除的组件名单缺失下面这些，请确认一下 |
Beta Was this translation helpful? Give feedback.
-
|
and ElDescriptionsItem? (for ElDescriptions) |
Beta Was this translation helpful? Give feedback.
-
|
感谢大佬，这三年换了两份工作一直用的都是 element-ui ，希望越来越好。 |
Beta Was this translation helpful? Give feedback.
-
|
fail to import on-demand in 1.1.0-beta.8, got error [Vue warn]: Failed to resolve component: el-menu-item. Only global registered el-menu like this thread suggested. And of course configed babel.conf.js as official doc said. |
Beta Was this translation helpful? Give feedback.
-
|
First I'd like to ask you about the actual installed Vue version via # at the root of your project
$ cat node_modules/vue/package.json | grep versionThe possible reason I could think of is that webpack have been dropping the side effects(*.css) files of course. But I think I have already fixed that in |
Beta Was this translation helpful? Give feedback.
-
|
The only possible reason I could think of is that you had some settings turned on to avoid importing css files while prod mode. |
Beta Was this translation helpful? Give feedback.
-
my module.exports = {
productionSourceMap: false,
chainWebpack: config => {
config.plugin("compressionPlugin").use(
new CompressionPlugin({
test: /\.js$|\.css/i,
})
);
},
};and to be sure, I don't have to do this |
Beta Was this translation helpful? Give feedback.
-
Yes indeed. I wonder would you mind share your repo to me for helping you out. I strongly suggest you to try it out with Vite since it is quite good than webpack though. |
Beta Was this translation helpful? Give feedback.
-
Sure, I just uploaded my code into here. I will go 2 check out Vite in future. But currently just keep with Webpack due to vue3 integration concern. After all, the default version of eslint created by vue-cli is still under 7. |
Beta Was this translation helpful? Give feedback.
-
|
vue-cli创建的工程，使用按需加载，在dev环境样式正常，但是build打包以后，样式丢失了； |
Beta Was this translation helpful? Give feedback.
-
|
用vite也有这个问题 |
Beta Was this translation helpful? Give feedback.
-
|
If this is about applying custom styles (like |
Beta Was this translation helpful? Give feedback.
-
|
same issue in vite project, must import 'element-plus/dist/index.css' when build |
Beta Was this translation helpful? Give feedback.
-
|
Hey, look this. Sass has some break changes. We have to change names of variables. #3661 |
Beta Was this translation helpful? Give feedback.
-
|
上面有提到过：
再次尝试通过 |
Beta Was this translation helpful? Give feedback.
-
为什么要做这次的破坏性变动 Why making such breaking changes in 1.1.0-beta.1
之所以做这个破坏性的变动，是因为很多陈年的从 ElementUI 时代就留下来的问题，在 ElementPlus 依旧没有得到解决，诸如：
The reason that we made breaking change like this is that we need to solve some OLD ISSUES INHERITED FROM ELEMENT-UI, such as:
webpack,vite.破坏性变动的目标 Target of making this breaking change.
破坏性变动列表 List of breaking changes
packages/components下。Source code structure, we've moved all components folder underpackages/components.dist用于存放CDN直接使用的代码。We've added a new folder calleddistat therootof the bundle for storing code used viaCDN.IDE 支持的文件都放在了根目录，这个不会对使用有任何影响。Also putIDE support filesto theroot, this won't have any effect of using the code.更好地组织代码 Better organizable code.
通过这次变动，我们将所有的组件文件夹放在了
packages/components文件夹下，并删除了每个文件下所对应的package.json文件，因为我们只需要在packages/components下放一个单独的package.json就足够了。通过这个变动让 ElementPlus 的项目结构更加清晰，将components和directives、hooks、utils等单独分开。并且添加了一个新的子文件夹用于存放一些 token 相关的代码。Via this change, we put all components under folder
packages/components, removedpackage.jsonfile from each components folder, because we will only need onepackage.jsonunderpackages/components. Doing this allows the structure of ElementPlus to be more clear, separatescomponentsfromdirectives,hooks,utils. Also we added a new folder for storing code abouttoken.去掉副作用 Removing side effects
问题分析 Issue analysis
ElemeFE/element#11817 提到的问题，是由于 Element 从一开始做的时候就没有考虑过 副作用(side effect) 对整个项目的影响，当我们使用按需加载样式文件 ( *.scss, *.css) 的时候，我们会需要用到
babel-import-plugin插件，这个插件会在我们引入 Element 组件的时候在后一行插入一行样式引用代码，以el-button举例。而引入样式的 import 是一个明显的副作用(side effect), 是没有办法能够通过
ES Module的静态分析去做优化的，这也导致了我们如果有多个地方同时引入了el-button这个 import 的语句会被插入进来多次。所以在这个地方我们就需要使用JS来作为中间层让ES Module的分析生效。更多阅读: 摇树 Tree Shaking
In ElemeFE/element#11817 mentioned that CSS rule will apply multiple times for the same element, that was because at the very beginning Element is not even considering how side effect will affect the code. When we need to load styling files (*.scss, *.css) on demand, we will need the babel plugin
babel-import-plugin, it will insert a statement for importing styling file, let's useel-buttonas an example.Further reading: Tree shaking
问题解决方案 Solutions
既然在上面我们提到了通过
JS作为桥梁去让副作用能够得到静态分析，那么我们就可以通过增加一个中间文件来间接引入*.css和*.scss文件，来跳过打包工具每次都去请求资源的问题。所以在这次改动中，我们给每个文件下添加了一个
style/的文件夹，里面存放了index.js和css.js文件，用于存放对*.scss和*.css的引用声明。然后对插件做了对应的更改，让插件在遇到这个模式的时候，去引入对应的那个*.js文件。还是用el-button作为例子：通过这样的方案，就算我们在不同的地方同时使用了 el-button，打包工具在遇到这个语句的时候，发现已经引入过
element-plus/es/el-button/style/css.js文件了，就不会再去重复去请求资源了。As above we mentioned that we can use
JSas a bridge to making side effects statically analyzable, so we can introduce a intermediate file to import*.scssand*.css, to bypass the bundler fetching issue for every single import statement.So in this change, we added a folder for each component named
style/which contains fileindex.jsandcss.jsfor importing co-responding style file import statement. And we made co-responding changes for the plugins, when the plugin encounter this pattern it will import the co-responding*.jsfile. Let's again useel-buttonas an example.As in
element-plus/es/el-button/style/css.js如何迁移 How to migrate
由于本次改动最大的影响是对打包产物的重新组织，所以如果你以前是全量引入样式文件的话，你需要更改样式文件所在的地址
Because that this breaking change mainly impact publish bundle, if you were using the full bundled style file, you will going to change the resource path in your project.
如果你使用 JS 引入 If you import via JS
如果你引入的是 CSS 文件。 If you were using CSS file.
如果你引入的是 SCSS 文件。If you were using SCSS file.
You will no longer need to import
base.scss如果你使用 CDN 引入 If you were using CDN
文件结构变动 File structure changes.
以下内容在当你需要在全局注册组件时适用
所有的以
El_[Name]_Item为名字的文件，都不需要单独注册，只需要注册大组件，即可自动注册所有item组件，因为这些item组件并不能单独使用。All files with
El_[NAME]_Itemshould not be registered individually since theitemtype components cannot be used individually so register them individually will make no sense.括号内是对应的父组件的名字，只需要注册父组件即可。You only need to register the component with the name in the parentheses.
Beta Was this translation helpful? Give feedback.
All reactions