electron+vue3全家桶+vite项目搭建【二】vite自动引入插件，按需引入element-plus

引入

视频讲解
demo项目地址

全局引入非常简单，这里不做详细介绍，咱们直接走按需引入

element-plus官网地址

1.安装依赖

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，如下：

 <el-button type="success">点我好吗</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')
}),