快捷導(dǎo)航

Vue自動(dòng)生成組件示例總結(jié)

更新時(shí)間：2023年12月23日 09:44:36 作者：林恒

在Vue中,我們可以使用unplugin-generate-component-name插件自動(dòng)基于目錄名稱生成組件名稱,這個(gè)插件使得在大型代碼庫(kù)中找到和管理組件更加容易和直觀,這篇文章主要介紹了Vue自動(dòng)生成組件示例總結(jié),需要的朋友可以參考下

功能

?? 支持 Vue 3 開(kāi)箱即用。
?? 支持 Vite、Webpack、Rspack、Vue CLI、Rollup、esbuild 等，由 unplugin 提供支持。
?? 支持文件夾名稱和 Setup extend 兩種模式。
?? 完全支持 TypeScript。

安裝

# Yarn
$ yarn add unplugin-generate-component-name -D
# pnpm
$ pnpm i unplugin-generate-component-name -D

Vite 配置

// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'
export default defineConfig({
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
})

Rollup 配置

// rollup.config.js
import GenerateComponentName from 'unplugin-generate-component-name/rollup'
export default {
  plugins: [
    GenerateComponentName({ /* options */ }),
  ],
}

Webpack 配置

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-generate-component-name/webpack').default({ /* options */ }),
  ],
}

使用方法(開(kāi)箱即用)

文件夾名稱

你可以使用index組件所在的文件夾名作為組件的名字。

自動(dòng)生成 Vue 組件名稱

在Vue中，我們可以使用unplugin-generate-component-name插件自動(dòng)基于目錄名稱生成組件名稱。這個(gè)插件使得在大型代碼庫(kù)中找到和管理組件更加容易和直觀。例如，假設(shè)我們有一個(gè)Vue組件名為Index.vue，此組件在Home目錄中。通過(guò)unplugin-generate-component-name插件，此組件會(huì)自動(dòng)命名為Home。

src/home/
├── index.vue // 組件名稱是 Home
├── about.vue
└── users/
    ├── index.vue // 組件名稱是 Users
    └── info.vue

Setup Extend

在<script setup>標(biāo)簽中，我們?cè)O(shè)置了 name 屬性為 "Home"。這顯式地將組件命名為 "Home"，unplugin-generate-component-name插件會(huì)使用這個(gè)名字而不是 "Index"。

<template>
  <!-- 你的組件標(biāo)記 -->
</template>
<script setup name="Home">
  // 你的腳本邏輯
</script>
<style>
  <!-- 你的組件樣式 -->
</style>

選項(xiàng)

type GenComponentName = (opt: {
    filePath: string;
    dirname: string;
    originalName: string;
    attrName: string | undefined;
}) => string;
interface PattenOptions {
    include?: string | RegExp | (string | RegExp)[];
    exclude?: string | RegExp | (string | RegExp)[];
    genComponentName: GenComponentName;
}
interface Options extends Omit<PattenOptions, 'genComponentName'> {
    enter?: PattenOptions[];
}

include

include選項(xiàng)能夠明確說(shuō)明哪些文件應(yīng)被包含在組件名稱的自動(dòng)創(chuàng)建過(guò)程中。

exclude

exclude選項(xiàng)則用于指明哪些文件應(yīng)排除在組件名稱的自動(dòng)創(chuàng)建過(guò)程之外。

enter

在Options接口中，有一個(gè)enter選項(xiàng)。enter是一個(gè)數(shù)組，該數(shù)組中每個(gè)對(duì)象都被視作一種特定的規(guī)則用于處理不同的文件路徑。

每一種規(guī)則都可以包含include和exclude選項(xiàng)，用以指明哪些文件是應(yīng)特別對(duì)待的。你也可以要求對(duì)genComponentName函數(shù)進(jìn)行特定的設(shè)置，以達(dá)到自定義組件名稱生成的效果。

下面是一個(gè)例子：

// vite.config.ts
import GenerateComponentName from 'unplugin-generate-component-name/vite'
export default defineConfig({
  plugins: [
     GenerateComponentName({
      include: ['**/*.vue'],
      enter: [{
        include: ["**/*index.vue"],
        genComponentName: ({ attrName, dirname }) => attrName ?? dirname
      }, {
        exclude: ['**/*.index.vue'],
        include: ["src/components/**/*.vue"],
        genComponentName: ({ dirname, originalName }) => `${dirname}-${originalName}`
      }]
    }),
  ],
});

在這個(gè)例子中，unplugin-generate-component-name插件被配置為處理所有的 .vue 文件。在enter選項(xiàng)中有兩個(gè)對(duì)象適用于不同的文件路徑：

第一個(gè)對(duì)象覆蓋所有以"index.vue"結(jié)尾的文件。genComponentName函數(shù)返回組件名稱。如果script setup 標(biāo)簽中已經(jīng)指定了名稱，那么優(yōu)先級(jí)將會(huì)很高; 如果沒(méi)有，文件夾名稱（dirname）就將會(huì)使用。
第二個(gè)對(duì)象排除了所有以"index.vue"結(jié)尾的文件, 僅包括"src/components/"目錄下的.vue文件。genComponentName函數(shù)用來(lái)以${dirname}-${originalName}的格式生成組件名。例如，對(duì)于一個(gè)名為src/component/Button中的MyButton.vue文件，它將會(huì)是Button-MyButton。