Vue配置自动导入vue.vue-router,pinia,vuex

关于项目中vue.vue-router,pinia,vuex自动导入的问题

安装

pnpm i -D unplugin-auto-import
pnpm i -D unplugin-vue-components

在项目的vite.config.js文件中配置自动导入插件如下：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
​
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  return {
    // vite 配置
    plugins: [
      vue(),
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia', 'vue-i18n'],
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      })
    ]
  }
})
​
​
​

这样配置以后，在后续的SPA或者SFC页面中，你可以省去vue,vue-router vuex ,vue-i18n的导入过程

import { useI18n } from "vue-i18n";
import { ref,computed } from "vue";
import { useRoute } from "vue-router";
​
// 这个是用来获取当前访问的路由信息,
const route = useRoute();
const { t } = useI18n();
const isCollapse = ref(false)
// 根据当前路由来激活菜单
const defaultActive = computed(()=>(route.path))

配置以后你可以简化如下：

// 这个是用来获取当前访问的路由信息,
const route = useRoute();
const { t } = useI18n();
const isCollapse = ref(false)
// 根据当前路由来激活菜单
const defaultActive = computed(()=>(route.path))