为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置

为nuxt项目写一个面包屑cli工具是一个比较有用的开发工具，它可以自动帮助开发者根据路由配置文件自动生成对应的页面及面包屑配置文件，并且可以简化开发的流程。下面是这个工具的实现过程：

步骤一：创建nuxt插件

我们可以通过在nuxt.config.js中配置plugins选项来创建一个nuxt插件：

// nuxt.config.js

plugins: [
  '~/plugins/breadcrumb'
]

步骤二：创建面包屑cli命令

在插件中可以定义cli命令，在执行命令时自动生成页面与面包屑配置文件。我们可以使用yargs库来创建命令，代码如下：

// plugins/breadcrumb.js

const argv = require('yargs').argv
const fs = require('fs')
const { join } = require('path')
const routes = require('../nuxt.config').router.routes
const pagesPath = join(__dirname, '../pages')
const componentsPath = join(__dirname, '../components')

export default ({}, inject) => {
  if (argv.breadcrumb) {
    const getBreadcrumb = (route) => {
      const breadcrumb = []
      let path = ''
      for (const segment of route.path.slice(1).split('/')) {
        path += '/' + segment
        breadcrumb.push({ text: segment, path })
      }
      return breadcrumb
    }

    routes.forEach((route) => {
      const pagePath = join(pagesPath, route.component.replace(/^\/+/, '') + '.vue')
      const pageExists = fs.existsSync(pagePath)

      if (!pageExists) {
        fs.writeFileSync(pagePath, '')
      }

      const breadcrumb = getBreadcrumb(route)

      const componentPath = join(componentsPath, 'Breadcrumb', route.name.toLowerCase() + '.vue')
      const componentExists = fs.existsSync(componentPath)

      if (!componentExists) {
        const content = `
        <template>
          <div class="breadcrumb">
            <nuxt-link to="/">Home</nuxt-link>
            <template v-for="(item, key) in items">
              <nuxt-link :to="item.path">{{ item.text }}</nuxt-link>
              <span v-if="key !== items.length - 1">&gt;</span>
            </template>
          </div>
        </template>

        <script>
        export default {
          computed: {
            items () {
              return ${JSON.stringify(breadcrumb)}
            }
          }
        }
        </script>
        `
        fs.writeFileSync(componentPath, content)
      }
    })

    console.log('Pages and breadcrumb components created!')
    process.exit()
  }
}

在插件中，我们定义了一个getBreadcrumb函数，它用来将一个路由转化为面包屑，将路由的每个路径段转化为面包屑的一个节点。

然后，我们遍历了所有的路由，对于每个路由，我们检查对应的页面文件是否存在，如果不存在就创建一个空文件。然后，我们使用getBreadcrumb函数获取面包屑，并创建一个面包屑组件。面包屑组件的名称为Breadcrumb，并且要求路由的名称要转化为小写。面包屑组件的结构类似于下面的示例：

<template>
  <div class="breadcrumb">
    <nuxt-link to="/">Home</nuxt-link>
    <template v-for="(item, key) in items">
      <nuxt-link :to="item.path">{{ item.text }}</nuxt-link>
      <span v-if="key !== items.length - 1">&gt;</span>
    </template>
  </div>
</template>

<script>
export default {
  computed: {
    items () {
      return [
        { text: 'Home', path: '/' },
        { text: 'About', path: '/about' },
        { text: 'Contact', path: '/contact' }
      ]
    }
  }
}
</script>

示例一：使用命令自动创建页面和面包屑配置

假设我们有一个路由配置文件，位于~/router/routes.js，其内容如下：

export default [
  {
    name: 'Home',
    path: '/',
    component: '~/pages/index.vue'
  },
  {
    name: 'About',
    path: '/about',
    component: '~/pages/about.vue'
  },
  {
    name: 'Contact',
    path: '/contact',
    component: '~/pages/contact.vue'
  }
]

我们可以使用我们创建的breadcrumb命令来自动生成页面和面包屑组件，命令如下：

npm run dev -- --breadcrumb

执行命令后，我们会发现在~/pages和~/components/Breadcrumb目录下分别生成了三个页面文件和三个面包屑组件文件。

示例二：使用面包屑组件在页面中显示面包屑

假设我们有一个文件位于~/pages/about.vue，其内容如下：

<template>
  <div>
    <h1>About page</h1>
    <breadcrumb-about />
  </div>
</template>

<script>
export default {
  components: {
    BreadcrumbAbout: () => import('~/components/Breadcrumb/about.vue')
  }
}
</script>

我们在页面中使用了一个驼峰式的组件名BreadcrumbAbout，其实际对应的组件文件为~/components/Breadcrumb/about.vue，在组件中，我们使用了我们之前创建的面包屑组件来展示面包屑。在页面中展示的面包屑如下所示：