vite vue3安装element-plus

准备

参考

安装

官网

yarn add element-plus
1

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
main.ts

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')
1
2
3
4
5
6
7
8
9
10

按需引入

打包体积小
需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

yarn add -D unplugin-vue-components unplugin-auto-import
1

修改vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver()],
		}),
		Components({
			resolvers: [ElementPlusResolver()],
		}),
	],
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

About.vue

<script lang="ts" setup>
//在单文件中引用，***注意要在script标签中引用，不要在style标签中引用！***
import 'element-plus/dist/index.css';
import { ElButton } from 'element-plus';
script>
<template>
	<ElButton type="primary">PrimaryElButton>
template>
<style scoped lang="scss">
.a {
	bottom: 10px;

	p {
		color: red;
	}
}
style>

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