微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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组件啦!组件的具体使用官方文档写的很详细的~

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐