Vue3.0 项目初始化及 Element Plus 配置实战

Vue3.0 项目初始化及 Element Plus 配置实战

本文将详细介绍如何从零初始化一个 Vue3 项目，并结合 Vite 配置 Element Plus 组件库（含自动引入、Sass 主题定制等），适合前端开发者参考。

1. 初始化 Vue3 项目

首先，使用官方脚手架工具快速初始化项目：

npm init vue@latest
# 或者
yarn create vue

根据提示选择 Vue3 相关特性（如 Router、Pinia、TypeScript 等），本文以最基础的 JS 版本为例。
进入项目目录并安装依赖：

cd your-project-name
npm install

2. 安装 Element Plus 及相关插件

Element Plus 是 Vue3 生态下非常流行的 UI 组件库。推荐配合自动导入插件和 Vite 进行高效开发。
安装依赖：

npm install element-plus
npm install -D unplugin-auto-import unplugin-vue-components vite-plugin-vue-devtools

3. 配置 Vite 及自动引入

编辑 vite.config.js，核心配置如下：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
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(),
    vueDevTools(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      // 配置Element Plus采用sass样式配色系统 
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;` // 引入全局样式变量
      }
    }
  },
})

说明

• AutoImport 和 Components 插件配合 ElementPlusResolver 实现了 Element Plus 组件和 API 的自动导入，无需手动 import。

• importStyle: 'sass' 让 Element Plus 使用 Sass 变量，方便主题定制。

• css.preprocessorOptions.scss.additionalData 让全局的 SCSS 变量（如主题色）自动注入到每个组件样式中。

4. 定制 Element Plus 主题（非必要）

在 src/styles/element/index.scss 中定义你的主题变量，例如：

// 只需要按需配置自己需要的就好
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #27ba9b,
    ),
    'success': (
      'base': #1dc799,
    ),
    'warning': (
      'base': #ffb302,
    ),
    'danger': (
      'base': #e26237,
    ),
    'error': (
      'base': #cf4444,
    )
  )
);

验证是否成功：在任意页面文件中添加一个Elbutton，查看一下颜色就好

<el-button type="primary">click me</el-button>

5. 运行项目

npm run dev

访问本地地址，即可看到带有自定义 Element Plus 主题的 Vue3 项目。

总结

通过上述步骤，你可以快速搭建一个支持自动引入和主题定制的 Vue3 + Element Plus 项目。后续只需在页面中直接使用 Element Plus 组件，无需手动 import，开发效率大大提升。如有疑问，欢迎留言交流！

---

如果你需要更详细的某一部分内容（如自动导入原理、主题变量详解等），可以告诉我，我会帮你补充！