关于javascript:vuerouter自动生成路由页面目录和文件

本人尝试写了个工具，已公布到 npm，地址：
https://www.npmjs.com/package…

欢送大家试用~ 这里先贴个文档，后续说一下实现思路😁

介绍

依据你所提供的 router 对象，主动地创立对应页面文件目录以及.vue 组件文件（SFC）

帮忙你省去反复繁冗的页面目录及文件的创立操作

应用场景

例如，依据个别的 vue-router 配置，假如咱们在文件里输入了一个 router:

// ./src/router/index.js

import {createRouter, createWebHashHistory} from 'vue-router';
import Component1 from '../views/page1/Component1.vue'

const routes = [
  {
    path: '/page1',
    component: Component1,
  },
  {
    path: '/page2',
    component: () => import('../views/page2/Component2.vue'),
    children: [
      {
        path: '/page2-1',
        component: require('../views/page2-1/Component3.vue').default;,
      }
    ]
  }
];

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

export default router

执行 auto-vue-route-sfc 的命令后，你将在我的项目目录下看到主动生成的对应页面目录和文件：

your-project/src
│
└─views
    ├─page1
    │      Component1.vue
    │
    └─page2
        │  Component2.vue
        │
        └─page2-1
                Component3.vue

性能

• 💡反对对 vue-router3、vue-router4 的应用
• 💡反对的模块加载语法：import、import()、require()

• 💡反对你对 import()、require() 进行本人的封装，比方：

  const YourImport = (src) => process.env.NODE_ENV === 'development' ?
                      require(src).default :
                      () => import(src) // 仅生产环境应用懒加载
  
  const routes = [
    {
      path: '/page1',
      component: YourImport('./Component.vue'), // 你封装的 import 办法
    }
  ]
  
  const router = new VueRouter({routes})
  
  export default router

• ❌暂不反对 ts

使用指南

筹备

请确保你曾经装置了 vue-router，并且有一个输入了 router 对象（export default router）的文件

装置

npm i -D auto-vue-route-sfc

创立配置文件

根底

在我的项目根目录下创立一个配置文件 auto-vue-route-sfc.config.js，内容示例如下：

module.exports = {
    entry: './your/router-dir/index.js',
    routerDir: './your/router-dir'
}

其中：

• entry: 是你输入 router 对象（export default router）的文件
• routerDir: 是你的路由功能模块所在的目录

额定性能：应用别名

反对门路别名的应用，能够在 auto-vue-route-sfc.config.js 中按如下配置：

module.exports = {
    entry: './src/router/index.js',
    routerDir: './src/router',
    // 应用别名
    alias: {
        '@': './src',
        '$': './xxx',
        'srcxxx': './src/xxx'
    }
}

不创立配置文件的状况

若我的项目根目录下没有发现 auto-vue-route-sfc.config.js，则将被默认视为如下配置：

{
    entry: './src/router/index.js',
    routerDir: './src/router',
    alias: {}}

若你是应用 vue-cli 创立的自带 vue-router 的我的项目，则默认配置与你我的项目的目录门路是统一的，无需做额定的更改和配置。

运行命令

形式一

关上终端，在根目录下运行

npx auto-vue-route-sfc

形式二

能够在我的项目 package.json 中配置 script 命令

 // package.json
 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "auto:sfc": "npx auto-vue-route-sfc" // 新增命令
  },

而后在终端运行

npm run auto:sfc

如若顺利，你将看到你的页面目录、组件文件被主动地创立在我的项目下！

留神

• 💡 你能够随时减少新的路由配置，而后运行这个工具来生成对应的新目录和新页面文件。曾经被你编写过的旧目录和旧页面文件是不会被笼罩的:)
• ❌然而对于更改或者删除旧路由，这个工具不会更改或删除旧目录、旧页面文件，因为它还不是一个页面目录的管理器:(