[JavaScript知识库]Vue3：自动导入

一、自动导入封装的Ajax-API

参考文章：vite2：全局自动导入api_你吃香蕉吗？的博客-CSDN博客

二、element-plus组件

1、安装插件

插件地址：https://github.com/antfu/unplugin-vue-components

npm i unplugin-vue-components -D

2、vite.config.js

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [
        ElementPlusResolver(),
      ],
      dts: true,
    }),
  ],
}

三、vue3的API自动导入

1、安装插件

插件地址：https://github.com/antfu/unplugin-auto-import

npm i -D unplugin-auto-import

2、?vite.config.js

import AutoImport from "unplugin-auto-import/vite";

export default {
  plugins: [
    AutoImport({
        // 自动导入vue相关的Api
        imports: ["vue"],   // 也支持vue-router、axios等
        // 声明文件的存放位置
        dts: 'auto-imports.d.ts',
    }),
  ],
}

3、效果：无需引入，即可使用vue提供的API

<template>
  <div>首页~~~~{{name}}</div>
</template>
<script setup lang="ts">
const name = ref('法外狂徒---张三儿');
</script>

四、vite.config.ts（我目前的完整配置）

import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

import AutoImport from "unplugin-auto-import/vite";

// elementplus相关包
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
// elementPlus提供的开箱即用的tree shaking功能
import ElementPlus from "unplugin-element-plus/vite";

const { resolve } = require("path"); //必须要引入resolve

// 数据mock配置
import { UserConfigExport, ConfigEnv } from "vite";
import { viteMockServe } from "vite-plugin-mock";

// https://vitejs.dev/config/
export default ({ command }: ConfigEnv): UserConfigExport => {
    return {
        plugins: [
            vue(),
            vueJsx(),
            AutoImport({
                // 自动导入vue相关的Api
                imports: ["vue"],  // 也支持vue-router、axios等
                // 声明文件的存放位置
                dts: 'src/auto-imports.d.ts',
            }),
            // 自动导入element的组件
            Components({
                resolvers: [ElementPlusResolver()],
                dts: true,
            }),
            ElementPlus(),
            viteMockServe({
                // ↓解析根目录下的mock文件夹
                mockPath: "mock",
                localEnabled: command === "serve",
                supportTs: true, // 打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。
                watchFiles: true, // 监视文件更改 更改mock的时候，不需要重新启动编译
            }),
        ],
        // 配置别名
        resolve: {
            alias: {
                "@": resolve(__dirname, "src"),
                "@store": resolve(__dirname, "src/store"),
            },
        },
        server: {
            host: "127.0.0.1", // 监听的IP地址
            port: 3000, //启动端口
            open: true, // 自动打开
            proxy: {
                "/dapi": {
                    target: "http://120.76.52.66",
                    changeOrigin: true,
                    rewrite: path => path.replace(/^\/dapi/, ""),
                },
            },
        },
    };
};

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖