工作中在做后台管理系统时，经常用到的是vue2.x适用的element-ui框架，最近看到同事用支持vue3.x的element-plus，感觉同事真的是与时俱进，今天就来看看element-plus框架如何使用。

1.安装element-plus框架

npm install element-plus

2.main.js中全局引入element-plus

引入element-plus分为全局引入和局部引入，但是为了简单，一般都是全局引入，这样也有弊端，比如下载的组件太多，导致打包速度缓慢等。但是引入只需要一次。

在main.js文件中：

// 全局引用
import ElementPlus from 'element-plus'
// 引用所有样式
import 'element-plus/lib/theme-chalk/index.css'

// 使用
app.use(ElementPlus)
复制

3.如果要局部引入——页面引入并注册组件

在main.js中就不用引入了，直接在页面上需要使用组件的地方引入并使用即可：

//导入组件
import { ElButton } from 'element-plus'
//导入基础样式
import 'element-plus/lib/theme-chalk/base.css'
//导入按钮的样式
 import 'element-plus/lib/theme-chalk/el-button.css'
export default defineComponent({
  name: 'App',
  components: {
   // 注册组件
    ElButton
  }
})
复制

4.配置引入

1. 只能引入插件的 css 文件，但是 base 样式和icon 还需要手动引入
2. 下载 npm install element-plus
3. 下载插件： npm install babel-plugin-import -D
4. 配置 babel.config.js

babel.config.js文件内容如下：

module.exports = {
    presets: ['@vue/app'],
    plugins: [
        [
            "import",
            {
                libraryName: 'element-plus',
                customStyleName: (name) => {
                    name = name.slice(3)
                    return `element-plus/packages/theme-chalk/src/${name}.scss`;
                },
            },
        ],
    ],
}
复制

参考大神链接：
大神关于element-plus的使用步骤介绍：https://www.jianshu.com/p/b761f610078d