按照官方文档的步骤来,踩了一些坑,记录下
一、安装elementUI
npm i element-ui -S
npm install babel-plugin-component -D
然后官方文档的原话是
将 .babelrc 修改为:
{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }
首先,.babelrc这个文件没有提路径,有的人尝试直接根目录下新建这个文件然后修改成功,这里其实在项目里会多一个babel.config.js,进去修改成如下就可以了
module.exports = {
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
这里先跳过,最后再看,如果最后运行失败,提示Cannot find module ‘babel-preset-es2015’,可以先安装,
npm install babel-preset-es2015 -D
然后把上述的babel.config.js文件改成如下即可
module.exports = {
"presets": [["@babel/preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
三、在main.js中使用引入即可,按照官方文档来
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
每想加一个组件,对应需要在import { Button, Select } from 'element-ui';中新增,然后再使用,Vue.component(XXXXX.name, XXXXX);或者Vue.use(XXXXXX),XXXX代表对应组件名
结束,文件引用成功,也可以把代码规整下,elementUI的代码放在插件中统一管理,在src目录下新建文件夹plugins,用来存放引入的组件,在plugins下新建elementUI.js,文件内容为
//elementUI.js文件内容
import Vue from 'vue';//这行必须加,不然会报错
import {
Button,
Select
} from 'element-ui';
Vue.use(Button)
Vue.use(Select)
对应的main.js引入即可
main.js对应的修改
import Vue from 'vue';
import App from './App.vue'
import './plugins/elementUI.js'//这行就是引入的代码
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app')
原文地址:https://blog.csdn.net/qq_43070891/article/details/115328306
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。