自动导入 unplugin ~

路由导入

• 安装：pnpm i -D unplugin-vue-router，vite / webpack 均支持
• vite.config.ts

import VueRouter from 'unplugin-vue-router/vite'
export default defineConfig({
  plugins: [
    VueRouter({}), // vite  必须在 vue() 之前
    vue(),
  ]
})

• router 文件 > index.ts

import { createRouter, createWebHistory } from 'vue-router/auto'
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL)
})

• .vscode > settings.json
• 设置自动导入文件时需要排除的模式，希望手动导入 vue-router，而不是通过自动导入来处理它。

{
  "typescript.preferences.autoImportFileExcludePatterns": ["vue-router"]
}

• tsconfig

"include": [
  "typed-router.d.ts" // 启动项目自动生成声明配置
],
"moduleResolution": "node" // 按照 commonJs 解析模块

• 创建： pages 文件（默认引用文件）
• 创建： index.vue、home.vue、about.vue、[…all].vue（404）
• index.vue

<template>
  <div>
    <RouterLink to="/">home</RouterLink> |
    <RouterLink to="/about">about</RouterLink>
  </div>
</template>
<script setup lang="ts">
// import { RouterLink } from 'vue-router/auto' // 不用导入
</script>

---

依赖导入

• 安装：pnpm i -D unplugin-auto-import
• 自动导入 JavaScript 包中的模块，并将其添加到项目中的代码中。
• vite.config

import AutoImport from 'unplugin-auto-import/vite' // 自动导入依赖
import { VueRouterAutoImports } from 'unplugin-vue-router' // 帮助简化 Vue Router 的使用
export default defineConfig({
  plugins: [
    AutoImport({
      include: [
        /\.[tj]sx?$/, // ts tsx js jsx
        /\/vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/ // md
      ],
      imports: [
        'vue',
        // 'vue-router',
        VueRouterAutoImports // 如已配置自动路由、代替 vue-router
      ]
    })
  ],
})

• tsconfig.app.json

"include": [
  "auto-imports.d.ts" // unplugin-auto-import 自动导入
],

• 示范： 自动导入 ref

<template>
	<h2>{{ msg }}</h2>
</template>
<script setup lang="ts">
const msg = ref('hello')
</script>

---

组件导入

• 安装：pnpm i -D unplugin-vue-components
• 安装 element ui 库 ：pnpm i element-plus
• vite.config

import Components from 'unplugin-vue-components/vite' // 自动组件导入
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 自动导入 element-plus
export default defineConfig({
  plugins: [
    // 自动导入组件
    Components({
      // 如 User 文件下的 user.vue 直接使用 <Useruser></Useruser>
      directoryAsNamespace: true, // 以文件名开头作为前缀，因为一些组件会重名
      // 如 User 文件下的 user.vue 直接使用 <User></User>
      collapseSamePrefixes: true, // 如果文件名和组件前缀一致，则省略
      resolvers: [ElementPlusResolver()] // 集成 element-plus
    })
  ]
})

---

图标集

• 安装：pnpm i -D unplugin-icons
• vite.config

import Components from 'unplugin-vue-components/vite' // 自动导入组件
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver' // 集成图标集
export default defineConfig({
  plugins: [
    // 自动导入组件
    Components({
      // 如 User 文件下的 user.vue 直接使用 <Useruser></Useruser>
      directoryAsNamespace: true, // 以文件名开头作为前缀，因为一些组件会重名
      // 如 User 文件下的 user.vue 直接使用 <User></User>
      collapseSamePrefixes: true, // 如果文件名和组件前缀一致，则省略
      resolvers: [
        ElementPlusResolver(), // 集成 element-ui
        // 集成图标集
        IconsResolver({
          prefix: 'icon' // 私有前缀
        })
      ]
    }),
    Icons({
      autoInstall: true // 自动安装所需图标集
    })
  ]
})

• 示例

<template>
  <div>
    <icon-mdi-account style="color: red" />
  </div>
</template>

---

自动布局 layouts

• 安装 ：pnpm i -D vite-plugin-vue-layouts
• vite.config

import Layouts from 'vite-plugin-vue-layouts'
export default defineConfig({
  plugins: [
    Layouts({
      layoutsDirs: 'src/layouts', // 指定布局文件（Layout）的目录路径
      defaultLayout: 'default' // 指定默认布局文件的名称
    })
  ]
}) 

• env.d.ts（二选一）

/// <reference types="vite-plugin-vue-layouts/client" />

• tsconfig（二选一）

"types": ["vite-plugin-vue-layouts/client"]

• router > main.ts

import { setupLayouts } from 'virtual:generated-layouts'
// import generatedRoutes from 'virtual:generated-pages' // 官方路由使用
// const routes = setupLayouts(generatedRoutes)
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), // 路由的历史模式
  // 扩展路由配置。它接受一个路由配置数组作为参数，并返回包含布局配置的新路由配置。
  extendRoutes: (routes) => setupLayouts(routes)
  // routes
})

• 创建 layouts 文件夹 > 创建你的 layouts 组件，如 default.vue

<template>
  <div>
    defult layouts
    <router-view></router-view>
  </div>
</template>

• 创建 pages文件夹 > 创建 index.vue

<template>
  <div>
    <RouterLink to="/">home</RouterLink> |
    <RouterLink to="/about">about</RouterLink>
  </div>
</template>

<script setup lang="ts">
// import { RouterLink } from 'vue-router/auto'
</script>

<route lang="yaml">
meta:
  layout: default
</route>

---

语法糖

• 安装：pnpm add -D unplugin-vue-macros @vue-macros/volar
• vite.config

  plugins: [
    VueRouter({}), // 方式二 必须在 vue 之前
    // vue(),
    // vueJsx(),
    // 代替以上
    VueMacros({
      plugins: {
        vue: vue(),
        vueJsx: vueJsx()
      }
    }),

• 示范

<template>
    <button @click="handleClick">Click me</button>
</template>

<script setup lang="ts">
const num = ref(0)

// macros
const emits = defineEmits<{
  (e: 'clickCount', num: number): void
}>()

// 官方：
// const emits2 = defineEmits<
//   SE<{
//     clickCount(num: number): void
//   }>
// >()

const handleClick = () => {
  console.log('click')
  emits('clickCount', ++num.value)
}
</script>

---

其他

vite-plugin-pages

• 安装 vue3 自动化路由：pnpm install vite-plugin-pages -D，只支持 vite
• env.d.ts 声明文件

/// <reference types="vite-plugin-pages/client" />

• router 文件 > index.ts

import { createRouter, createWebHistory } from 'vue-router'
import routes from '~pages'
const router = createRouter({
  // history 底层是 history api pushState replaceState popstate
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

• vite.config.ts

import Pages from 'vite-plugin-pages'
export default defineConfig({
  plugins: [
    Pages({
      // dirs:['src/views'] // 默认为 pages 、将 view 文件夹设置成自动路由的路径
    })
  ]
})

路由前置守卫方案

• 重定向： router 文件 > index.ts

router.beforeEach((to, from, next) => {
  if (to.path === '/home') {
    next('/')
  }
  next()
})

• 编程式

<script setup lang="ts">
	import { useRouter } from 'vue-router'
	const router = useRouter()
	router.push('/')
</script>

• 官方推荐

<route lang="yaml">
	name:home
	redireact:
	path: /
</route>

• vite.config.ts

export default defineConfig({
  plugins: [
    Pages({
      extendRoute(route) {
        if (route.path === '/home') {
          return { ...route, redirect: '/' }
        }
        return route
      }
    })
  ],
})

• tsconfig.json

  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/define-options",
      "@vue-macros/volar/define-models",
      "@vue-macros/volar/define-props",
      "@vue-macros/volar/define-props-refs",
      "@vue-macros/volar/short-vmodel",
      "@vue-macros/volar/define-slots",
      "@vue-macros/volar/export-props"
    ]
  }