vite vue3安装element-plus

准备

参考

安装

官网

yarn add element-plus

完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
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')

按需引入

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

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

修改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()],}),],
});

About.vue

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