实战篇：（十三）新手指南：搭建 Vue 3 项目，完美结合 Element Plus 的使用技巧!

新手指南：搭建 Vue 3 项目，完美结合 Element Plus 的使用技巧!

本篇文章将带你一步一步地学习如何使用 Vite 创建一个 Vue 3 + TypeScript 项目，并轻松集成 Element Plus 组件库，让你的应用界面更加优雅和实用。

无论你是刚接触前端开发的新手，还是希望提升开发效率的开发者，这篇指南都将为你提供清晰的步骤和实用的技巧，帮助你快速上手。在文章中，我们将详细介绍项目的创建过程、按需加载 Element Plus 组件的方法，以及一些实用的示例，让你在短时间内掌握这三者的结合使用。

准备好一起探索这个现代开发工具的世界了吗？让我们开始吧！

1.目录结构

my-vite-element-plus/
├── node_modules/           # 安装的依赖包
├── public/                 # 公共资源文件夹，静态文件放在这里
├── src/                    # 源代码文件夹
│   ├── assets/             # 静态资源，比如图片、字体等
│   │   └── logo.svg        # 示例图片
│   ├── components/         # Vue 组件
│   │   └── HelloWorld.vue  # 示例组件
│   ├── App.vue             # 组件
│   ├── main.ts             # 项目入口文件
│   └── vite-env.d.ts       # TypeScript 环境声明文件
├── .gitignore              # Git 忽略文件配置
├── index.html              # 项目主 HTML 文件，Vite 自动插入构建好的 JS
├── package.json            # 项目配置文件，包含依赖和脚本
├── tsconfig.json           # TypeScript 配置文件
├── tsconfig.node.json      # Node.js 环境的 TypeScript 配置
└── vite.config.ts          # Vite 配置文件，按需引入插件

2. 使用 Vite 创建项目

首先，通过命令行使用 Vite 创建一个 Vue 3 + TypeScript 项目：

npm create vite@latest my-vite-element-plus --template vue-ts

生成一个包含 Vue 3 和 TypeScript 的 Vite 项目模板。

1. 在命令行中运行这条命令后，系统会提示你选择项目名称，使用默认名称 my-vite-element-plus 或输入其他名称。
2. 进入项目文件夹：

cd my-vite-element-plus

3. 安装项目依赖：

npm install

3. 安装 Element Plus

在项目中安装 Element Plus 和其所需的依赖：

npm install element-plus

3. 按需加载 Element Plus 组件

为了优化项目的性能和减少打包体积，我们将使用按需加载。按需加载允许你只引入项目中用到的组件，而不是整个 Element Plus 库。

1. 安装按需加载所需的插件 unplugin-vue-components 和 unplugin-auto-import：

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

2. 更新 vite.config.ts 文件，配置按需引入：

// 导入 Vite 的配置函数
import {
    defineConfig } from 'vite';
// 导入 Vue 插件，以支持 Vue 单文件组件
import vue from '@vitejs/plugin-vue';
// 导入用于按需加载组件的插件
import Components from 'unplugin-vue-components/vite';
// 导入 Element Plus 的解析器，用于识别 Element Plus 组件
import {
    ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// 导入自动导入插件，用于自动引入组件
import AutoImport from 'unplugin-auto-import/vite';

// 导出 Vite 的配置
export default defineConfig({
   
  // 配置插件
  plugins: