vite中引入element-plus

element-plus官网：Button 按钮 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/component/button.html

下载

npm i -S element-plus

局部引入【推荐！】

再下载以下包

npm i -D unplugin-vue-components unplugin-auto-import

vite.config.js中配置： 

import AutoImport from "unplugin-auto-import/vite"
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]

然后就可以直接使用了，样式都不用额外导入，也不用在main.js中配置了

全局引入【不推荐。打包时速度很慢】 

main.js中全局引入

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

.use(ElementPlus)

使用

直接在App.vue中调用即可

<el-button type="primary">Primary</el-button>