Vite + Vue 3 项目中使用 Element Plus

文章目录

- - [1. 安装 Element Plus](#1. 安装 Element Plus)
  - [2. 在项目中引入 Element Plus](#2. 在项目中引入 Element Plus)
  - - 全局引入
    - 按需引入
  - [3. 使用 Element Plus 组件](#3. 使用 Element Plus 组件)
  - [4. 注意事项](#4. 注意事项)

在 Vite + Vue 3 项目中使用 Element Plus 相当直接。Element Plus 是 Element UI 的 Vue 3 版本，一个基于 Vue 3 的桌面端组件库。以下是在你的 Vite + Vue 3 项目中引入和使用 Element Plus 的步骤：

1. 安装 Element Plus

首先，你需要在你的项目中安装 Element Plus。打开终端，导航到你的项目目录，然后运行以下 npm 命令：

bash 复制代码

npm install element-plus --save
# 或者如果你使用 yarn
yarn add element-plus

2. 在项目中引入 Element Plus

有几种方式可以在你的 Vue 3 项目中引入 Element Plus：

全局引入

如果你想要在你的整个项目中全局使用 Element Plus 的组件，你可以在项目的入口文件（通常是 main.js 或 main.ts）中引入 Element Plus 并使用 Vue 的 app.use() 方法来注册它。

javascript 复制代码

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

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

按需引入

如果你想要优化你的打包体积，只引入你实际使用的组件，你可以使用 Babel 插件 babel-plugin-import 或者使用 Vite 的插件如 vite-plugin-components 加上 unplugin-vue-components/resolvers 来实现按需引入。

以 vite-plugin-components 为例，你首先需要安装它：

bash 复制代码

npm install vite-plugin-components -D
# 或者
yarn add vite-plugin-components -D

然后，在你的 vite.config.js 或 vite.config.ts 文件中配置它，并设置 Element Plus 的解析器：

javascript 复制代码

// vite.config.js 或 vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'vite-plugin-components'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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

请注意，如果你选择按需引入，你可能还需要手动安装并引入 Element Plus 的样式文件，或者在你的组件中单独引入。

3. 使用 Element Plus 组件

一旦你完成了上述步骤，你就可以在你的 Vue 组件中直接使用 Element Plus 的组件了。例如，使用 <el-button> 组件：

vue 复制代码

<template>
  <el-button type="primary">点击我</el-button>
</template>

<script>
// 如果你选择全局引入，这里不需要额外的 import
// 如果你选择按需引入，并且没有在 vite.config.js 中配置自动解析，
// 你需要在这里 import 具体的组件
// import { ElButton } from 'element-plus'
// export default {
//   components: {
//     ElButton
//   }
// }
</script>

4. 注意事项

确保你的项目依赖是最新的，特别是 Vue 和 Vite。
如果你在使用 TypeScript，你可能需要安装 @element-plus/icons-vue 并注册图标组件，或者在你的项目中单独处理图标。
Element Plus 的 API 和组件可能会随着版本的更新而有所变化，请参考最新的官方文档。