vue3 Vite Ts Element-Plus组件按需导入方法

项目框架：Vite + Ts + Element-Plus

Vite 使用的 Vue3，需要使用 Element-Plus 组件库
如果用的 Vue2，使用 Element 组件库

安装 Element-Plus

在项目根目录下，使用 npm 命令进行 安装：

npm install element-plus --save

或者简写：

npm i element-plus -S

“ install ” 可以简写成 “ i ” ，“–save ” 可以简写成 “ -S ”，安装其他依赖包时也可以这样简写。
-S 是 代表 安装并添加 依赖包信息到 “ package.json ” 文件的 “dependencies” 配置下， “dependencies” 中记录的是 项目正式环境（线上环境）运行时要用的 东西；

-D 安装并添加依赖包信息到 “ package.json ” 文件的 “devDependencies” 配置下
有的依赖可以不用安装到正式环境，只在开发环境会用到，就可以安装的时候使用 “ -D ” ， “devDependencies” 记录的是 开发环境下 要用到的东西

如果 没有 -S 或 -D，直接是 “ npm install *某依赖 ” , 相当于 “ npm install *某依赖 -S ”，会安装并记录安装信息到 “ package.json ” 文件的 “dependencies” 配置下。

安装后，可以在“ package.json ” 文件的 “dependencies” 配置下看到 “element-plus” 安装包信息，如下所示:

安装 unplugin-vue-components 和 unplugin-auto-import这两款插件

如果要自动导入使用到的 Element-Plus 组件，需要额外安装 unplugin-vue-components 和 unplugin-auto-import这两个插件，
使用如下命令，进行安装：

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

-D 是安装到 开发环境，正式环境不需要

配置 vite.config.ts 文件自动导入设置

在文件中添加以下代码：

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: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

如图所示：

使用 element-plus 组件

直接在 页面中使用 组件，如下：

<template>
  <div class="home">
    <el-button type="primary">Primary</el-button>
  </div>
</template>

运行项目后就可以看到引入的 按钮组件：

在页面中使用组件后，组件会被自动导入，可以在 “ components.d.ts ”文件中看到 使用组件的导入信息：

更多不同导入方法可查看 element-plus 官方文档：

https://element-plus.gitee.io/zh-CN/guide/quickstart.html#按需导入