elementui的使用以及容易出现的问题

其实大多数的使用都可以参考官网elementUI官网

1.安装

安装的时候需要注意一下，当前的vue版本是2还是3，他们安装的命令有些区别
vue2

npm i element-ui -S
1

vue3

npm install element-plus --save
1

但是我的还是报错了，因为版本冲突，报错信息如下

this command with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.
1

解决就是在命令行后面加上 --legacy-peer-deps

npm install element-plus --save --legacy-peer-deps
1

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)
});
1
2
3
4
5
6
7
8
9
10
11
12

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')
1
2
3
4
5
6
7
8

2.2按需引入

vue3
1.下载插件

npm install babel-plugin-import -D
1

2.在项目中配置babel.config.js，如果没有则自行创建一个

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-plus',    // 框架名
        styleLibraryName: 'theme-chalk'  // 样式名称
      }
    ]
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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)
    })
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4.在入口文件引入element-plus

import installElementPlus from '@/plugins/element'

const app = createApp(App)
installElementPlus(app)
app.mount('#app')

1
2
3
4
5
6

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在组件中使用的时候直接引入

import {Button, Upload} from 'element-ui'
export default {
  components:{
    [Button.name]:Button,
    [Upload.name]:Upload
  },
 }
1
2
3
4
5
6
7