其实大多数的使用都可以参考官网elementUI官网
1.安装
安装的时候需要注意一下,当前的vue版本是2还是3,他们安装的命令有些区别
vue2
npm i element-ui -S
vue3
npm install element-plus --save
但是我的还是报错了,因为版本冲突,报错信息如下
this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
解决就是在命令行后面加上 --legacy-peer-deps
npm install element-plus --save --legacy-peer-deps
2.引入
2.1全局引入
vue2
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)
});
vue3
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
createApp(App).use(ElementPlus).use(store).mount('#app')
2.2按需引入
vue3
1.下载插件
npm install babel-plugin-import -D
2.在项目中配置babel.config.js,如果没有则自行创建一个
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-plus', // 框架名
styleLibraryName: 'theme-chalk' // 样式名称
}
]
]
}
3.创建一个plugins文件夹,里面创建一个element.js
// 引入特定组件及样式
import 'element-plus/lib/theme-chalk/index.css'
import {
ElButton,
ElContainer,
ElHeader,
ElAside,
ElMain,
} from 'element-plus'
//注册特定组件
const components = [
ElButton,ElContainer,ElHeader,ElMain,ElAside
]
export default (app) => {
components.forEach(component => {
app.component(component.name, component)
})
}
4.在入口文件引入element-plus
import installElementPlus from '@/plugins/element'
const app = createApp(App)
installElementPlus(app)
app.mount('#app')
5.在vue文件了按需进行使用
<template>
<el-form-item class="button">
<el-button type="primary" @click="showDialog" v-authElement="['templateAdd']">查看市场分析</el-button>
</el-form-item>
</template>
<script>
import { ElFormItem,ElTable } from 'element-plus'
export default {
components: {
ElFormItem,
ElTable
},
}
</script>
在组件中使用的时候直接引入
import {Button, Upload} from 'element-ui'
export default {
components:{
[Button.name]:Button,
[Upload.name]:Upload
},
}