vue项目如何使用ElementUI

前言
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
安装好后如图,这里可以看到已经安装好了,警告是告诉我们,这里跳过了几个可选的安装包。
在这里插入图片描述
安装好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组件啦!组件的具体使用官方文档写的很详细的~


版权声明:本文为qq_40501683原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。