前言
ElementUI目前分为两个版本:ElementUI2和ElementUI3,其中ElementUI2是为vue2准备的,ElementUI3是为vue3准备的。
官网地址
ElementUI2:
https://element.eleme.cn/#/zh-CN/component/installation
ElementUI3:
https://element-plus.gitee.io/zh-CN/#/zh-CN/component/installation
在vue项目中使用
本文笔者目前使用ElementUI2,因此本文以ElementUI2为例,对vue项目中如何使用ElementUI进行说明。
步骤一:安装ElementUI
打开需要使用ElementUI的项目,在终端输入如下代码即可。
npm i element-ui -S
安装好后如图,这里可以看到已经安装好了,警告是告诉我们,这里跳过了几个可选的安装包。
安装好ElementUI之后可以选择在需要的地方进行全局引入或者,在main.js中进行局部引入,笔者建议选择全局引入的方式,只引入一次,在每一个页面都可以使用。引入后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({
router,
render: h => h(App)
}).$mount('#app')
到这里就可以在页面中使用ElementUI组件啦!组件的具体使用官方文档写的很详细的~