蝙蝠岛资源网 Design By www.hbtsch.com

一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间。

从长远来看,使用插件自动生成路由是具有一定好处的。当项目中的路由配置非常多的时候,为了区分业务,你可能需要分成许多个文件来存放这些路由文件,这样就不得不去维护这些路由文件。

比如这样的路由文件结构:

|-src/
  |-router/
    index.js
    childrenRouter.js
    childrenRouters/
      // ...some children router files

其中 childrenRouters 目录中维护了各个业务相关的路由。

每当要添加路由的时候,还得重复的写 import 和路由配置项。

比如:

import userlist from '@/views/user/list.vue';
import shoplist from '@/views/shop/list.vue';
import goodslist from '@/views/goods/list.vue';
//import ...

export default [
 {
  path: 'user/list',
  name: 'userlist',
  component: userlist,
  alias: 'user',
 },
 {
  path: 'shop/list',
  name: 'shoplist',
  component: shoplist,
  alias: 'shoplist',
 },
 // ...
]

当一个项目的路由配置多了以后,要维护这些路由文件也是一件费时费神的事情。

现在使用 vue-route-webpack-plugin 插件来自动生成路由后,就无需再关心和维护这些路由文件了。

使用方式

注:以下摘自仓库 README,如有更新以仓库为准

安装

$ yarn add -D @xiyun/vue-route-webpack-plugin

配置

在 vue.config.js 或在 webpack 配置文件中加入插件配置:

const VueRouteWebpackPlugin = require('@xiyun/vue-route-webpack-plugin');

module.exports = {
 configureWebpack: {
  plugins: [
   new VueRouteWebpackPlugin({
    // 选项,见下文
   })
  ],
 }
};

使用

在需要配置路由的页面级 .vue 文件中加入路由配置:

假设在 user.vue 文件中:

<template>
 <div>user</div>
</template>
<script>
// @route('user/list')
// 或
// 第二个参数是路由别名
// @route('user/list', 'user')
// 或使用多行注释
/**
 * @route('user/list')
 * 或
 * @route('user/list', 'user')
 */
export default {
 name: 'user',
 data() {
  return {}
 }
}
</script>

默认情况下,当你启动开发服务或执行构建的时候,就会在 src/router 目录下生成 children.js 这个路由文件。

假设你的页面文件路径是: src/views/user/list.vue ,那么生成的路由文件的内容看起来就会是这样的:

import userlist from '@/views/user/list.vue';
export default [
 {
  path: 'user/list',
  name: 'userlist',
  component: userlist,
  // 如果配置了别名
  alias: 'user',
 },
]

因为这个文件会由插件自动生成,所以你可以在 .gitignore 文件中把这个路由文件在版本库中忽略掉,避免多人协同开发时因频繁改动发生冲突。

默认目录约定

src/
 |-views/     (项目文件,插件会扫描该目录下所有 .vue 文件的路由配置)
  |-...
 |-router/    (路由目录)
  |-index.js   (主路由文件,需要引入 children.js 作为子路由来使用)
  |-children.js (路由文件,由插件自动生成)

选项参考

插件提供了以下这些选项供自定义配置

new VueRouteWebpackPlugin({
 // 文件扩展名,默认只查询 .vue 类型的文件,根据实际需要可以进行扩展
 extension: ['vue', 'js', 'jsx'],
 // 插件扫描的项目目录,默认会扫描 'src/views' 目录
 directory: 'src/views',
 // 生成的路由文件存放地址,默认存放到 'src/router/children.js'
 routeFilePath: 'src/router/children.js',
})

总结

以上所述是小编给大家介绍的使用 webpack 插件自动生成 vue 路由文件的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

标签:
vue自动生成,vue,路由文件,webpack,插件

蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“使用 webpack 插件自动生成 vue 路由文件的方法”

暂无使用 webpack 插件自动生成 vue 路由文件的方法的评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。