【vue学习笔记】vue3引入unplugin-auto-import并接入element-ui

vue3引入unplugin-auto-import并接入element-ui

接上一篇vue3部署：【vue学习笔记】 vue3 + vite + route实现框架构建

一、引入自动引入插件

1.unplugin-auto-import

npm i unplugin-auto-import -D

2. 在vite.config.js中引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import { resolve } from "path"
//引入插件
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
plugins: [
		vue(),
		//配置插件
		AutoImport({
			imports: ['vue', 'vue-router']
		})
	],
	resolve: {
		// 配置路径别名
		alias: {
			'@': resolve(__dirname, './src'),
		},
	},
});

二、安装element

1.安装element-ui

npm install element-plus --save

2. 按需导入

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

3.在vite.config.js新增插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import { resolve } from "path"
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//引入插件
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
plugins: [
	vue(),
	//配置插件
	AutoImport({
	resolvers: [ElementPlusResolver()],
		imports: ['vue', 'vue-router']
	}),
	Components({
		resolvers: [ElementPlusResolver()],
	}),
],
resolve: {
	// 配置路径别名
	alias: {
		'@': resolve(__dirname, './src'),
	},
},
});

4.测试是否引入成功

<template>
这是home页
<el-button :icon="Search" circle />
</template>
<script setup>
	import { Search } from '@element-plus/icons-vue'
</script>

5.如果报错

 [vite] Internal server error: Failed to resolve import "@element-plus/icons-vue" from "src/views/Home.vue". Does the file exist?

## 安装扩展
npm install @element-plus/icons-vue