在vite和vue3中使用element plus

首先需要安装vite-plugin-style-import

npm install vite-plugin-style-import -D

安装element plus

npm install element-plus --save

引入element plus

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store/store.js'
import router from './router/index.js'

// 引入element plus
import ElementPlus from 'element-plus';
// 引入css文件
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(store)
.use(ElementPlus)
.use(router)
.mount('#app')

vite的配置项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'element-plus',
        esModule: true,
        ensureStyleFile: true,
        resolveStyle: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.css`;
        },
        resolveComponent: (name) => {
          return `element-plus/lib/${name}`;
        },
      }]
    })
  ]
})

使用element plus

<template>
	<el-row>
	  <el-button>默认按钮</el-button>
	  <el-button type="primary">主要按钮</el-button>
	  <el-button type="success">成功按钮</el-button>
	  <el-button type="info">信息按钮</el-button>
	  <el-button type="warning">警告按钮</el-button>
	  <el-button type="danger">危险按钮</el-button>
	</el-row>
</template>

<style scoped lang='scss'>
	// 改变组件的样式
	.el-row{
	  button{
	    color: #000;
	  }
	}
</style>