Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/panio123/vue-auto-routes-webpack-plugin

根据指定目录自动生成 vue-router 配置
https://github.com/panio123/vue-auto-routes-webpack-plugin

vue vue-auto-routes vue-router vuejs

Last synced: about 5 hours ago
JSON representation

根据指定目录自动生成 vue-router 配置

Awesome Lists containing this project

README 

        
# vue-auto-routes-webpack-plugin

根据指定目录自动生成 vue-router 配置



安装



```bash

  npm i --save-dev vue-auto-routes-webpack-plugin

```



```bash

  yarn add --dev vue-auto-routes-webpack-plugin

```



使用方法



插件会从指定入口遍历读取[.vue]文件并在指定目录输出一个 vue-router 配置文件。部分路由配置也可在组件内通过 [$$route] 属性声明。



目录示例



```

src

├── route

│   └── index.js

│   └── routes.js

├── views

    ├── Login.vue  

    ├── main

    │    ├── Index.vue

    │    ├── List.vue

    │    ├── subDir

    │    │   ├── Index.vue

    │    │   └── Order.vue

    │    │

    │    └── otherSubDir

    │

    ├── otherDir

    └── ...



```



**webpack.config.js**

```js



const path = require('path');

const VueAutoRouteWebpackPlugin = require('vue-auto-routes-webpack-plugin')



function resolve(_path) {

  return path.resolve(__dirname, _path);

}



module.exports = {

  entry: 'index.js',

  output: {

    path: __dirname + '/dist',

    filename: 'index_bundle.js'

  },

  plugins: [

    new VueAutoRouteWebpackPlugin({

      entry: resolve('src/views/'),

      output: resolve('src/route/routes.js'),

      rootComponent: 'Login',

      indexComponent: 'Index',

      useFileName: true,

      layouts:{

        main:reslove('src/layout/index')

      }

    })

  ]

}



```

插件会在 [output] 目录下生成 [routes.js] 文件，大概像这样



**src/route/routes.js**

```js



export default [{

  "name": "Login",

  "path": "/",

  "components": {

    default: require('/Users/mac/Documents/project-formal/auto-vue-router/src/views/Login.vue').default

  },

  "meta": null

}, {

  "path": "/main",

  "children": [{

    "name": "List",

    "path": "List",

    "components": {

      default: require('/Users/mac/Documents/project-formal/auto-vue-router/src/views/main/List.vue').default

    },

    "meta": null

  }, {

    "path": "sub",

    "children": [],

    "components": {

      default: require('/Users/mac/Documents/project-formal/auto-vue-router/src/views/main/sub/Index.vue').default

    },

    "name": "sub/Index",

    "meta": null

  }],

  "components": {

    default: require('/Users/mac/Documents/project-formal/auto-vue-router/src/views/main/Index.vue').default

  },

  "name": "/main/Index",

  "meta": null

}]



```



然后你就可以直接使用这份配置了



**src/route/index.js**

```js



import Vue from 'vue'

import Router from 'vue-router'



import routes from './routes'



Vue.use(Router);



routes.push({

  path: '*',

  redirect: '/'

})



export default new Router({

  routes: routes

});



```



你还可以在 [.vue] 组件内定义路由的相关信息，但这也不是必须的，只有你需要时才这么做



```js



export default {

  name:'login',

  $$route:{

    name:'Login',

    lazy:true,

    meta:{

      label:'登录'

    }

  }



}



```



插件配置参数



|Name|Type|Default|Description|Required|

|:--:|:--:|:-----:|:----------|:--|

|**`entry`**|`{String}`|`无`|路由页面的入口路径|`Yes`|

|**`output`**|`{String}`|`无`|配置文件输出路径|`Yes`|

|**`rootComponent`**|`{String}`|`Login`|根路由下的组件，也就是当路由为`/`时的页面，【不要】带有`.vue`后缀哦|`Yes`|

|**`indexComponent`**|`{String}`|`Index`|多级路由时，需要为每级路由提供一个入口，用于放置``承载子路由，【不要】带有`.vue`后缀哦|No|

|**`useFileName`**|`{Boolean}`|`false`|是否使用`文件名`作为`路由名称`|No|

|**`ignoreDir`**|`{String}`|`components`|在插件遍历目录时，需要忽略的目录，目前只支持忽略一个|No|

|**`propsKeyName`**|`{String}`|`$$route`|组件内的路由配置key name,有需要可以更换|No|

|**`layouts`**|`{Object}`|`{}`|公用布局配置，可在 `indexComponent` 组件中通过 `$$route.layout` 来设置当前路由需要使用的布局  |No|



【$$route】配置参数



```js



export default {

  // $$route 仅在需要的时候才配置，它并不是必须有的；

  // $$route 可以通过修改插件配置自定义keyName，必须是一个纯对象。

  $$route:{

    // 路由名称，同 vue-router 的 name；

    name:'Login',

    // 是否懒加载

    // 1、true => 需要懒加载，但不指定包名；  

    // 2、String => 需要懒加载，且值为包名。 包名指的是 webpack 使用 import() 分包加载时需要配置的 [webpackChunkName]；

    // 【重点强调】：lazy 只支持 布尔值-true 或 其它任意字符串；

    lazy:true,

    //同 vue-router 的 meta；

    meta:{

      label:'登录'

    },

    // 同 vue-router 的 path

    path:'/',

    // 同 vue-router 的 redirect

    redirect:'/login',

    // 同 vue-router 的 alias

    alias:'',

    // 仅在 indexComponent 组件中使用才有效

    layout:'main'



  }



}



```



其它说明



- 作者能力和时间有限，暂时不支持 `vue-router` 的 `命名视图` ，这个用到的也比较少；

- 每次项目启动或有文件删除时，插件会遍历所有目录和文件。但如果只是修改了文件，插件会自动diff变动文件的[$$route]配置并更新；

- 其它不懂的可以先看 demo 。