vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据_unplugin-vue-components

一、按需引入自定义组件：unplugin-vue-components

unplugin-vue-components插件可以在Vue文件中自动引入组件（包括项目自身的组件和各种组件库中的组件）；

使用此插件后，不需要手动编写import { Button } from 'ant-design-vue’这样的代码了，插件会自动识别template中使用的自定义组件并自动注册。

1. 安装[unplugin-vue-components]

npm install unplugin-vue-components
1

2. 在vite中使用

import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig {
  // ...
  plugins: [
    // 按需引入
    Components({
      deep: true, // 搜索子目录
      dirs: ['src/components'], // 按需加载的文件夹
      resolvers: [ ElementPlusResolver() ] // ElementPlus按需加载
    })
  ],
  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这样就可以在页面中直接使用element-plus组件了，是的，不需要在main.ts里导入element-plus，然后进行Vue.use，就是这么厉害，直接在页面中用就完事了，并且按需加载组件和样式，非常的强大

二、自动导入依赖包：unplugin-auto-import

模块化已经是现代 Web 开发必不可少的开发方式，频繁引入依赖包是一个常见的操作。但是，手动引入依赖包往往繁琐，尤其是当依赖包数量较多时，会显著降低开发效率。

unplugin-auto-import 插件，可以帮助我们在项目中，自动导入常用的使用的第三方库的 API，就可以方便我们开发，提升开发效率。

1.安装

npm i -D unplugin-auto-import
1

2.vite.config.js配置

import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
  plugins: [
    ...
     AutoImport ({
      imports: ["vue", "vue-router","pinia"], //自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
      resolvers:[ElementPlusResolver()]
    })
  ]
})
1
2
3
4
5
6
7
8
9
10

3.使用效果

以 Vue 为例，在没有使用自动导入前，需要手写以下的 import 语句：

import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)
1
2
3

使用 unplugin-auto-import 插件后：

const count = ref(0)
const doubled = computed(() => count.value * 2)
1
2

三、自动生成路由：vite-plugin-pages

使用 vite-plugin-pages 之后：就可以更高效快捷开发。

只需要在目录写好对应页面，即可自动生成路由,上面的路由对应的文件结构如下。

注意： 当然这里使用了 pages ,因为是默认配置,你也可以配置成原来大家更习惯的 views 。

1、安装

vite-plugin-pages 依赖vue-router运行因此还需要安装vue-router

npm install -D vite-plugin-pages
npm install vue-router
1
2

2、配置-vite.config.js中配置

import Pages from 'vite-plugin-pages'

export default {
  plugins: [
    // ...
    Pages({
      dirs: "src/views", // 需要生成路由的文件目录，默认就是识别src下面的pages文件
      exclude: ["**/components/*.vue"], // 排除在外的目录，上面配置目录的例子，里面有 components 目录，我们不希望他被解析为路由
      extendRoute(route, parent) {
        if(route.path==='/') return { ...route,redirect:'page1' }//给默认路由加一个redirect，默认为index.vue
      }
    }),
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、配置-router/index.js配置,main.js中正常挂载路由

import { createRouter, createWebHistory } from "vue-router";
import routes from "~pages";
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;
1
2
3
4
5
6
7

4、route标签中科院对页面的路径进行修改，优先级大于自动生成的路径

<route>
{
  name: "name-override",
  meta: {
    requiresAuth: false
  }
}
</route>
1
2
3
4
5
6
7
8

5、自动生成vue-router的路由遵循的规则

src/views/index.vue -> /
src/views/index/a.vue -> /a // 这里的a.vue就是index.vue的子路由（children）
src/views/father.vue -> /father
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页面

四、自动生成模拟数据：vite-plugin-mock

vite-plugin-mock 是一个用于在开发过程中模拟数据的插件，它可以帮助你在前端开发中更方便地进行测试和开发。

通过使用 vite-plugin-mock，你可以在开发环境中轻松地模拟后端接口返回的数据，从而避免因后端接口未准备好而影响前端开发进度。同时，该插件还支持自定义模拟数据和全局模拟数据，方便你在不同场景下进行测试和开发。

使用 vite-plugin-mock，你需要先安装它，然后在 Vite 配置文件中配置该插件，最后在你的组件或页面中使用 importMock 或 defineMock 方法来模拟数据。具体使用方法可以参考文档或示例代码。

1.安装vite-plugin-mock

npm i mockjs -s
npm i vite-plugin-mock -D
1
2

2.vite.config.js文件配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
  vue(),
  viteMockServe({
    mockPath: 'mock',//解析根目录下的mock文件夹
  }),
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12

3.在根目录创建mock文件夹，创建index.js

import mockJS from 'mockjs'
const userList = mockJS.mock({
    "data|100": [{
        name: '@cname',
        'id|+1': 1
    }]
})

const userListData = [{
    method: 'post',
    url: '/api/users',
    response: ({
        body
    }) => {
        return {
            code: 200,
            msg: 'success',
            data: userList
        }
    }
}]

export default userListData
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

4.使用

<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
onMounted(() => {
  fetch("/api/users", { method: "post" }).then((res) => {
    console.log(res);
  });
});
</script>
1
2
3
4
5
6
7
8