vue3 自动导入 + element-plus

使用unplugin-auto-import插件

unplugin-auto-import 插件的作用是实现 vue中模块的自动装载，只用该插件后就可以不用在每个组件中都导入所需要使用的模块了，

例如ref，reactive，生命周期函数…..;

npm 网址: https://www.npmjs.com/package/unplugin-auto-import

语法

安装unplugin-auto-import.

npm i unplugin-auto-import -D或者yarn add unplugin-auto-import --dev

在 vite.config.js 中配置插件。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({imports:['vue','vue-router']}), // 需要导入的内容
  ]
})

配置完成之后,将文件中关于ref的导入进行删除,此时发现程序无任何报错

<template>
  <div ref="box">box</div>
  <button @click="btn">点击获取OB偶像</button>
  <ul>
    <li v-for="i in 4" :key="i">{{i}}</li>
  </ul>
</template>
<script setup>
  
let box = ref()
const btn = ()=>{
  console.log(box.vlaue);
}
</script>

在 vue3中导入 element-plus 中配置自动导入

1，安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2，完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3，自动导入

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue','vue-router'],
    })
})

3，自动导入（参考）
下载 npm i unplugin-icons unplugin-vue-components unplugin-auto-import -D

在 vite.config.ts 用来参考

import path from 'path'
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Inspect from 'vite-plugin-inspect'

const pathSrc = path.resolve(__dirname, 'src')

export default defineConfig({
  resolve: {
    alias: {
      '@': pathSrc,
    },
  },
  plugins: [
    Vue(),
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue'],

      // Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      resolvers: [
        ElementPlusResolver(),

        // Auto import icon components
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],

      dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
    }),

    Components({
      resolvers: [
        // Auto register icon components
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
        // Auto register Element Plus components
        // 自动导入 Element Plus 组件
        ElementPlusResolver(),
      ],

      dts: path.resolve(pathSrc, 'components.d.ts'),
    }),

    Icons({
      autoInstall: true,
    }),

    Inspect(),
  ],
})