解决低版本引入高版本element ui组件单独全局注册

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解决低版本引入高版本element ui组件单独全局注册相关的知识,希望对你有一定的参考价值。

参考技术A 一、从高版本的node_module里面找到element-ui/packages 里的组件引入到components

二、main.js引入

三、在node_modules 里面的element-ui/lib/theme-chalk里面找到对应组件样式引入

自定义element-ui主题,修改样式

项目需求

之前项目中引用的select选框有bug,所以需要改动,考虑到还有许多需求,果断将饿了么组件全移过来

安装element-ui2.0.1版本

安装完之后,我就将element-ui的组件应用上,然后编译的时候报错了。就是el-ipt找不到一类的错误,查了查资料,说是版本不一致,element-ui2.0的版本需要升级vue的版本,如下解决办法:
更改版本 把vue 和 vue-template-compiler 都更新到了2.5.3版本
npm remove # 卸载某个版本
npm remove vue
npm remove vue-template-compiler
npm i [email protected]
npm i [email protected]
npm i [email protected]

根据官网步骤来自定义主题

第一步:先安装npm i element-theme ,这里起先我装的是全局的,然后一直报错,就换成了项目中安装
第二步:npm i element-theme-chalk -D 更新组件
接下来就是et -i ,没有看清官网上写的就直接打上了,结果报错。原因是项目中安装的主题需要通过node_modules/.bin/et 访问到命令
执行后当前目录会有一个 element-variables.scss 文件
接下来就是在文件里修改变量内容了。

生成引入修改后的css文件

命令行里输入 node_modules/.bin/et 然后得到css文件,最后在main.js中引入即可。
另外,有一些里面不能同意修改的css,我选择在外面另外写css覆盖

以上是关于解决低版本引入高版本element ui组件单独全局注册的主要内容,如果未能解决你的问题,请参考以下文章

element-ui中单独引入Message组件的问题

Element ui 2.8版本中的table树不能默认全展开解决方法

关于element-ui的按需引入配置

在使用低版本的element-ui升级到element-ui 2.0的时候遇到的问题

vue-cli引入element和vant前端ui组件

解决elemnt-ui安装后运行报错的问题