全局引入非常简单，这里不做详细介绍，咱们直接走按需引入
element-plus官网地址
安装依赖
element-plus相关依赖
npm install element-plus --save
vite按需引入插件
npm install -D unplugin-vue-components unplugin-auto-import
2.配置文件修改
vite.config.ts文件补充配置
import { defineConfig } from 'vite'
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()],
}),
],
})3.测试一下代码
我们在HelloWorld.vue文件中补充一个el-button，如下：
点击脚本运行显示效果如下：
4.自动导入文件说明
运行后我们会发现项目的根目录下面会多出两个自动导入的ts声明文件：
我们打开components.d.ts，可以看到里面自动导入了ElButton和HelloWorld两个组件
此时我们可以删除App.vue中的HelloWorld组件的导入，如下：
此时我们重启项目，仍然能正常访问HelloWorld组件，所以依靠两个插件，我们实现了vue组件的自动引入和element的按需引入
5.自动导入配置
我们觉得根目录下面有太多文件，不太好，可以把声明文件塞到一块儿，并配置自动导入的解析路径
1.根目录创建types目录，并将生成的自动导入的声明文件拖拽进去
2.调整vite.config.ts文件
设置自动导入的路径
//...
import path from 'path'
AutoImport({
// ....
dts: path.resolve(__dirname, 'types/auto-imports.d.ts')
}),
Components({
// ....
dts: path.resolve(__dirname, 'types/components.d.ts')
}), 推荐文章
