减少代码插件unplugin-auto-import

npm i unplugin-auto-import -D

配置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 { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
import AutoImport from 'unplugin-auto-import/vite';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        // 自动加载antdui
        Components({
            resolvers: [AntDesignVueResolver()]
        }),
        // 自动加载vue常用功能
        AutoImport({
            // targets to transform
            include: [
                /.[tj]sx?$/,
                /.vue$/,
                /.vue?vue/,
                /.md$/,
            ],
            imports: [
                // 插件预设支持导入的api
                'vue',
                'vue-router',
                'pinia'
                // 自定义导入的api
            ],
            eslintrc: {
                enabled: false,
                filepath: './.eslintrc-auto-import.json',
                globalsPropValue: true, 
            },
            dts: './auto-imports.d.ts',
        })
    ],
    // 路径别名配置start
    resolve: {
        alias: {
            '@': resolve(__dirname, './src')
        },
    }
    // 路径别名配置end
});

这样写代码的时候就不用import {ref} from 'vue' 之类的，还有很多的配置可以查看官方文档，这里是简化了下vue，router和要引入的pinia

1 安装 Pinia

npm install pinia

2 配置Pinia

src下创建文件夹store并新建index.ts文件

import { App } from "vue";

const store = createPinia();

export { store };

在src下main.ts配置

import { createApp } from 'vue';
import App from './App.vue';
import router from '@/router/index';
import { store } from '@/store';

const app = createApp(App);
app.use(router);
app.use(store);
// 挂载应用
app.mount('#app', true);

从0-1搭vue3前端后进了精神病院(6)--状态管理

减少代码插件unplugin-auto-import

1 安装 Pinia

2 配置Pinia