vite-plugin-papes、vite-plugin-vue-layouts、unplugin-vue-components、unplugin-auto-import

插件

vite-plugin-papes

作用：

可以读取指定的目录文件，自动化生成路由信息，高效快捷开发

注意：

• vite-plugin-pages基于vue-router，需要安装vue-router
• vite-plugin-pages默认指定的页面文件夹是 pages，默认指定的页面是 index.vue，所以在pages文件夹下面创建一个 index.vue文件
• 如果要更改默认指定的页面文件，可以在vite.config.ts文件中重新配置

使用：

1. 安装

pnpm install vite-plugin-pages

pnpm install vue-router

2. vite.config.ts配置

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import Pages from  'vite-plugin-pages'
   
   export default defineConfig({
     	plugins: [
     		Vue(),
     		Pages({
     			dirs: "src/views", //需要生成路由的文件目录，默认文件夹为pages
               exclude: ["**/components/*.vue"], //排除components目录下的.vue文件
               extendRoute(route, parent) {
           		if (route.path === '/') return {
             			...route,
             			redirect: 'login'
           		} //给默认路由加一个redirect，默认为index.vue
        		 },
     			importMode: "async"
     		})		 	
     	]
     )}
   

3. main.ts配置

```js
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
//自动读取刚才配置的目录（views）下的页面，不需要自己再写routes
import generatedRoutes from 'virtual:generated-pages'

const router = createRouter({
  history: createWebHistory(),
  routes: generatedRoutes,
})

const app = createApp(App)
app.use(router).mount('#app')
```

4. env.ts配置

   /// <reference types="vite/client" />
   //加入此代码，main.ts页面不会报红
   /// <reference types="vite-plugin-pages/client" />
   
   declare module '*.vue' {
     import type { DefineComponent } from 'vue'
     // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
     const component: DefineComponent<{}, {}, any>
     export default component
   }
   
   

5. 自动生成vue-router的路由映射规则

   • src/views/index.vue -> /
   • src/views/index/a.vue -> /a // 这里的a.vue就是index.vue的子路由（children）
   • src/views/father/index.vue -> /father
   • src/views/users.vue -> /users
   • src/views/father/son.vue -> /father/son
   • src/views/father/[id].vue -> /father/:id
   • src/views/[father]/son.vue -> /:father/son
   • src/views/[…all].vue ->文件用来适配404页面

   例如：当目录结构为：

   src/views/
     ├── users/
     │  ├── [id].vue
     │  └── index.vue
     └── users.vue
   

   将得到如下的路由配置信息

   [
     {
       path: '/users',
       component: '/src/views/users.vue',
       children: [
         {
           path: '',
           component: '/src/views/users/index.vue',
           name: 'users'
         },
         {
           path: ':id',
           component: '/src/views/users/[id].vue',
           name: 'users-id'
         }
       ]
     }
   ]
   

vite-plugin-vue-layouts

作用：

页面可以自由组合布局，可以在页面加载指定的layout。

注意：

• vite-plugin-vue-layouts 会读取指定目录文件夹下面的文件。
• vite-plugin-layouts默认读取的文件夹名字是 layouts，创建一个 src/layouts 文件夹
• vite-plugin-layouts默认读取的文件是 src/layouts/default.vue ，创建default.vue

使用：

1. 安装

pnpm install vite-plugin-vue-layouts

2. vite.config.ts配置

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import Pages from  'vite-plugin-pages'
   import Layouts from 'vite-plugin-vue-layouts'
   
   export default defineConfig({
     	plugins: [
     		Vue(),
     		Pages(),
           Layouts({
       // 如果是默认 layouts文件夹，默认 default.vue文件，则不需要配置
         		layoutsDirs: 'src/layouts', // 布局文件存放目录
         		defaultLayout: 'default', //对应 src/layouts/default.vue
       	}),
     	]
     )}
   

3. main.ts配置

```js
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
//自动读取刚才配置的目录（views）下的页面，不需要自己再写routes
import generatedRoutes from 'virtual:generated-pages'
// 自动读取 layouts文件夹下的文件
import { setupLayouts } from "virtual:generated-layouts"

const router = createRouter({
  history: createWebHistory(),
  routes: setupLayouts(generatedRoutes),//更改原来的generatedRoutes
})

const app = createApp(App)
app.use(router).mount('#app')
```

4. tsconfig.json配置

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

5. 更改默认的 default.vue 文件时

   //在任意.vue文件中
   <script setup>
   </script>
   
   <template>
   </template>
   
   // 添加标签 <route> 使用其他的 layouts 目录下的布局文件
   <route lang="yaml">
   meta:
   	layout: users //注意缩进
   </route>
   //或者当项目中有的路由是需要用到布局页面的，有的不需要时，可以将不需要的页面设置为 layout: false 
   <route lang="yaml">
   meta:
   	layout: false
   </route>
   

6. 在main.ts文件添加代码

   import { createApp } from 'vue'
   import App from './App.vue'
   import { createRouter, createWebHistory } from 'vue-router'
   //自动读取刚才配置的目录（views）下的页面，不需要自己再写routes
   import generatedRoutes from 'virtual:generated-pages'
   // 自动读取 layouts文件夹下的文件
   import { setupLayouts } from "virtual:generated-layouts"
   
   let routes = []
   generatedRoutes.forEach(v => {
       routes.push(v?.meta?.layout != false ? setupLayouts([v])[0] : v)
   })
   const router = createRouter({
     history: createWebHistory(),
     routes: routes
   })
   
   const app = createApp(App)
   app.use(router).mount('#app')
   

unplugin-vue-components（vite-plugin-components）

作用：

在Vue文件中自动导入的相关库或者本地的vue文件，不需要在每个文件中手动导入组件

支持的解析器：

​ Ant Design Vue、Arco Design Vue、BootstrapVue、Element Plus、Element UI、Headless UI、IDux、linkline、Ionic、Naive UI、Prime Vue、Quasar、TDesign、Vant、Varlet UI、Vuetify、VueUse Components、VueUse Directives、Dev UI

例如：

//使用子组件时
<template>
	<Child/>
</template>

<script setup lang="ts">
import Child from "./src/components/child.vue" //需要import
<script>
-------------------------------------------
// 引入unplugin-vue-components之后
 <template>
 	<Child/>
 </template>

 <script setup lang="ts">
 //直接使用，不需要import
 </script>

使用：

1. 安装

pnpm install unplugin-vue-components

2. vite.config.ts配置

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import Pages from  'vite-plugin-pages'
   import Layouts from 'vite-plugin-vue-layouts'
   import Components from 'unplugin-vue-components/vite'
   import {
     ElementPlusResolver
   } from 'unplugin-vue-components/resolvers'
   
   export default defineConfig({
     	plugins: [
     		Vue(),
     		Pages(),
           Layouts(),
           Components({
               deep: true, //搜索子目录
               resolvers: [ 
          			ElementPlusResolver() //Element Plus按需加载
         		],
               dirs: ['src/components'] //按需加载的文件夹
           }),
     	]
     )}
   

unplugin-auto-import

作用：

自动导入常用的使用的第三方库的 API

注意：

• 会在根目录生成一个auto-import.d.ts，将所有的插件导入到global中，在页面中可以直接使用

使用：

1. 安装

pnpm install unplugin-auto-import

2. vite.config.ts配置

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import Pages from  'vite-plugin-pages'
   import Layouts from 'vite-plugin-vue-layouts'
   import Components from 'unplugin-vue-components/vite'
   import AutoImport from 'unplugin-auto-import/vite'
   
   export default defineConfig({
     	plugins: [
     		Vue(),
     		Pages(),
           Layouts(),
           Components(),
           AutoImport ({
         		imports: ["vue", "vue-router","pinia"], //自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
               dts:'src/auto-import.d.ts'    // 路径下自动生成文件夹存放全局指令
       	})
     	]
     )}
   

efineConfig({
plugins: [
Vue(),
Pages(),
Layouts(),
Components(),
AutoImport ({
imports: [“vue”, “vue-router”,“pinia”], //自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
dts:‘src/auto-import.d.ts’ // 路径下自动生成文件夹存放全局指令
})
]
)}
```

3. 没有自动生成auto-import.d.ts文件时，重新运行一下项目，或者关闭编辑器重新打开运行