vue3.0 项目自动化导入

项目中使用到 element UI plus 具体用法看官方文档

npm install element-plus --save

main.ts

import 'element-plus/dist/index.css'

Volar 支持

"compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }

自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

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

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({
    imports: ["vue", "vue-router"], // 也支持vue-router、axios等
     resolvers: [ElementPlusResolver()],
         dts: "auto-imports.d.ts", // 声明文件的存放位置
   }),
   Components({
     resolvers: [ElementPlusResolver()],
       dts: true,
   }),
 ],
})

设置好后会生成两个文件 auto-imports.d.ts 和components.d.ts ,开发过程中可能会加载的时候可能会刷新页面,并不是特别友好

element ui 中文设置

app.vue

<template>
  <el-config-provider :locale="locale">
  <router-view />
  </el-config-provider>
</template>

<script lang="ts" setup>
import { autoRefresh } from './utils/autoUpdate';
import { ElConfigProvider } from "element-plus";
import locale from "element-plus/es/locale/lang/zh-cn";
onMounted(() => {
	nextTick(() => {
		if (import.meta.env.MODE !== 'development') autoRefresh();
	});
});
</script>

icon的引入

main.ts

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
  

页面上的直接使用
<el-icon><Plus /></el-icon>