使用vue3引入element-ui完整流程

1. 安装element-ui

npm install element-plus --save

2. 在main.js中引入element-ui

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3. 在组件中使用element-ui

<template>
  <div>
    <el-button>默认按钮</el-button>
  </div>
</template>
<script>
export default {
  name: 'MyComponent'
}
</script>

4. 可选：按需引入

在使用element-ui时，可以选择按需引入，只引入需要的组件。需要安装babel-plugin-component插件。

npm install babel-plugin-component -D

在babel.config.js中添加配置：

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

然后在组件中按需引入：

<template>
  <div>
    <el-button>默认按钮</el-button>
  </div>
</template>
<script>
import { ElButton } from 'element-plus'

export default {
  name: 'MyComponent',
  components: {
    ElButton
  }
}
</script>