原项目是基于require.js来加载模块的,增加新功能的同时想使用流行一点的组件(Element)和Vue;本身这两个库就是支持Require.js的,不多说直接开干。
一开始,是这样的:
require(["https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js","https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.0/index.js"],function (Vue,ELEMENT){
Vue.use(ELEMENT);
/*.........*/
});
报错:Uncaught TypeError: Cannot read properties of undefined (reading 'install') 想简单了,Element中是这样定义的。
define("ELEMENT", ["vue"], t);
Element是依赖于Vue的,所以得先在require.js的config中配置好Vue,修改为下面:
require.config({
paths: {
/*......*/
'Vue':['https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue'],
"ELEMENT":['https://unpkg.com/element-ui@2.15.6/lib/index']
}
});
改好了,继续跑一跑
还是报错,再次检查,发现Element中的模块依赖的Vue是小写,将config中定义的Vue模块名改为小写vue,然后运行。
一切OK,开始享受Element+Vue带来的便捷开发。
按需引入:https://zhuanlan.zhihu.com/p/427023137
1. 按需引入样式( unplugin-element-plus):https://github.com/element-plus/unplugin-element-plus/blob/main/README.zh-CN.md
2.自动组件导入:https://element-plus.gitee.io/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5
3.使用table组件时,宽度设置百分比的话,设置width是没用,需要设置min-width;