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 是安装到开发环境，正式环境不需要

扫描二维码关注公众号，回复： 15020023 查看本文章

配置 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#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5