vite项目如何安装element

创建vite+vue3项目

npm create vite@latest

安装element包

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

创建和挂载Vue应用

1. 完整导入

直接挂载就完了。

// 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')

2. 按需导入

需要使用额外的插件来导入要使用的组件。

自动导入 （推荐）

首先需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

导入和配置 Vite 插件

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

总结

1. 安装

npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

2. 配置

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// vite.config.ts
// import { defineConfig } from 'vite'
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()],
		}),
	],
})

3. 使用

<!-- App.vue -->

<script setup lang="ts">

</script>

<template>
  <el-button type="primary">Hello World</el-button>
</template>

<style scoped>

</style>