vite2 常用插件篇（五）- 进阶插件

上一篇文章主要讲了vite日常开发常用的几个进阶插件，这篇文章讲下另外几个常用的进阶插件

一、vite-plugin-pages

1.说明

基于文件系统的 Vue3 的 vite 插件

• npm：vite-plugin-theme
• git：vite-plugin-theme

2.安装

$ npm install -D vite-plugin-pages
$ npm install vue-router@next

3.配置插件

build/vite/plugin/page.ts：

/**
 * 基于文件系统的 `Vue3` 的 vite 插件
 * https://github.com/hannoeru/vite-plugin-page
 */
import type { Plugin } from 'vite';
import Pages from 'vite-plugin-pages';

export function configPagesPlugin(): Plugin {
  const pagesPlugin: Plugin = Pages({
    // 配置查找的页面文件扩展名
    extensions: ['vue', 'md'],
    // 配置页面文件所在的目录位置
    pagesDir: 'src/views',
  });
  return pagesPlugin;
}

4.配置Vite

build/vite/plugin/index.ts：

// ...
import { configThemePlugin } from './theme';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // vite-plugin-page
  vitePlugins.push(configPagesPlugin());

  return vitePlugins;
}

5.新建页面

在 src/views 下创建 HelloWorld.vue 文件

src/views/HelloWorld.vue：

<template>
  hello world
</template>
<script lang="tsx">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

6.路由自动映射

src/router/index.ts：

import { createRouter } from "vue-router";
import generatedPagesRoutes from "virtual:generated-pages";

console.log('generatedPagesRoutes', generatedPagesRoutes);
const router = createRouter({
  // ...
  routes: generatedPagesRoutes,
});

配置类型声明文件，解决引入 import routes from "virtual:generated-pages"; 如下报错：

Cannot find module 'virtual:generated-pages' or its corresponding type declarations.ts(2307)

创建 types/vite-env.d.ts 文件，写入如下：

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

7.查看效果

这时候查看routes或者直接根据文件名称访问路由，就可以看到我们写的内容

二、vite-plugin-components

1.说明

一个按需自动导入组件的 vite 插件

• npm: vite-plugin-components：一个压缩图片资源的 vite 插件。
• git：vite-plugin-components

2.安装

npm i vite-plugin-components -D # yarn add vite-plugin-components -D

3.配置插件

build/vite/plugin/imagemin.ts：

/**
 * 一个按需自动导入组件
 * https://github.com/antfu/vite-plugin-components
 */

import ViteComponents from 'vite-plugin-components';

export function configComponents() {
  return ViteComponents({
    // 组件的有效文件扩展名。
    extensions: ['vue', 'md'],
    customLoaderMatcher: path => path.endsWith('.md'),
    // 用于搜索组件的目录的相对路径。
    dirs: ['src/components'],
    // 是否递归搜索子目录
    deep: true,
    // 生成`components.d.ts` 全局声明，
    // 接受自定义文件名的路径
    globalComponentsDeclaration: false,
    // 允许子目录作为组件的命名空间前缀。
    directoryAsNamespace: false,
    // 忽略命名空间前缀的子目录路径
    // 当 `directoryAsNamespace: true` 时有效
    globalNamespaces: [],
  });
}

4.配置Vite

build/vite/plugin/index.ts：

// ...
import { configComponents } from './components';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
  // ...
  // 配置 vite-plugin-components 插件
  vitePlugins.push(configComponents());
}

5.定义组件

src/components/HelloWorld.vue

<template>
  <h1>
    {{ msg }}
  </h1>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      default: '',
    },
  },
});
</script>

6.使用组件

src/pages/MyComponent.vue

<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
  </div>
</template>

<script lang="tsx">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'MyComponent',
});
</script>

7.路由配置

路由表中配置 MyComponent 就可以

此时，浏览器访问使用组件的路由，应该可以看到如下效果(请忽略水印～)