注意版本!
注意版本!
注意版本!
看清楚引入组件的条件,比如版本,能让我们少走很多弯路!
我这里就删除了原本使用vite创建的vue3框架,重新使用vue-cli@3(其实是vue-cli@5)重新搭建了vue2,以便于更好的兼容组件。
具体引入过程可以参考官网:Element - The world's most popular Vue UI framework
也可以接着往下看,因为基本都是参照官网的,在结合自身遇到的问题给自己记个笔记,也希望可以给同样小白的你一点帮助
引入整个 Element
在 main.js 中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。
我的结尾处比官网多个.$mount('#app'
盲猜是因为我的vue-cli版本高了点,后面出问题再调整吧,不要学我哈
另外还需要特别注意,新手可能会遇到的一个麻烦:
安装完成后如果遇到这样的报错,不用担心,只是因为main.js文件中,element-ui引入的位置需要调整
这里不能完全复制官网的安装教程,通常还需要在前面加../node_modules/,这里不做过多解释,还不懂可以自己搜搜看。
按需引入(推荐)
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
这个文件需要找一下,怕麻烦可以试试直接再本地文件夹里搜索;
我是在node_modules下的babel-plugin-dynamic-import-node里找到的
这个文件里员额不能的内容,我是全部覆盖了的,意思是:“这里使用了
airbnb
预设,它是Airbnb JavaScript风格指南所推荐的一组Babel插件的集合,可以帮助您编写符合Airbnb代码风格的JavaScript代码。”
接下来,你需要什么组件就引用什么组件就可以了。
官网给到的例子是引入 Button 和 Select
只需要在 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)
});
如果上述描述有误,欢迎大佬指正