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

一款自动生成 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 路由文件的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

    介绍 做前端的大家都知道通过 vue 开发的项目每次创建新组建的时候,都要新建一个目录,然后新增 .vue 文件,在这个文件中再写入 template . script . style 这些内容,虽然在写入的时候大家都有自己的自动补全共计,不过这些都是模板性的,每次都要这样重复操作,很麻烦有没有. 本文就是通过node来帮助我们,自动去执行这些重复操作,而我们只需要告诉控制台我们需要创建的组件名字就可以了. 本文自动创建的组件包含两个文件:入口文件 index.js .vue文件 main.vu

  • vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • 基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法

    背景 •基于Vue-cli 项目产品部署,涉及到的交互的地址等配置信息,每次都要重新打包才能生效,极大的降低了效率.我们的目的是让项目实施的小伙伴重新快乐起来.网上实现的方式,都是半自动化的,还需要重新修改. 需求点 •配置化:打包后的配置文件可二次修改 •配置自动生成:vue-cli 提供了各种环境的打包,要实现相关配置文件的自动打包 •研发人员无痛感:对于产品研发人员来说,不需要增加额外的打包成本,基于Vue-cli的开发习惯不变. 实现步骤 一:配置自动生成 •安装generate-ass

  • 通过npm或yarn自动生成vue组件的方法示例

    不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template.script.style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件.虽然有vscode有代码片段能实现自动补全,但还是很麻烦,今天灵活运用scripts工作流,自动生成vue文件和目录. 实践步骤 安装一下chalk,这个插件能让我们的控制台输出语句有各种颜色区分 npm install chalk --save-dev yarn add chalk --s

  • Vue结合原生js实现自定义组件自动生成示例

    就目前三大前端主流数据驱动框架(vue,ng,react)而言,均具有创建自定义组件的api,但都是必须先做到事先写好挂载点,这个挂载点可以是原有静态元素标签也可以是自定义模板:对于多种组件通过同一数据流生成的,如果事先在页面上写好挂载点(mounted),然后通过dom操作去动态添加,会遇到类似这样一条错误提示信息:Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.(-).这又是为何呢,下一

  • vue init webpack 建vue项目报错的解决方法

    使用vue init webpack 创建vue项目时报如下错误: vue init webpack my-project C:\Users\computer\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init:60 let template = program.args[0] ^^^ SyntaxError: Block-scoped declarations (let, const, function, class) not yet s

  • 使用 webpack 插件自动生成 vue 路由文件的方法

    一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间. 从长远来看,使用插件自动生成路由是具有一定好处的.当项目中的路由配置非常多的时候,为了区分业务,你可能需要分成许多个文件来存放这些路由文件,这样就不得不去维护这些路由文件. 比如这样的路由文件结构: |-src/ |-router/ index.js childrenRouter.js

  • webpack如何自动生成网站图标详解

    目录 介绍 准备 使用 兼容 结语 介绍 我们在自己搭建项目的时候,有时候主管给你一张logo图片,让你自己想办法变成网站图标,有时候项目需求里不仅仅是多种尺寸的favicon.ico,还有安卓和ios在apple-touch-icon这类私有属性的各种尺寸需要icon,其实到是有些在线工具或者本地软件让你去使用,但是就是有点烦躁,有没有考虑过完全无视这个任务,让项目构建打包之后自己生成,不用再去费心了.本期我们就给大家介绍这样一个自动将图片处理成网站图标的插件 —— html-webpack-

  • VsCode插件自动生成注释插件koroFileHeader使用教程

    目录 VsCode插件自动生成注释插件koroFileHeader使用 PS:vscode使用‘koroFileHeader‘插件生成注释 插件安装 配置插件 插件使用 生成图案注释 VsCode插件自动生成注释插件koroFileHeader使用 强烈推荐的一款VsCode注释插件koroFileHeader,具体使用参考内容. 1.安装插件. 在VsCode里选择Extensions搜索koroFileheader进行安装. 2.根据需要修改默认注释配置,先选择File-Preference

  • android自动生成dimens适配文件的图文教程详解(无需Java工具类)

    在编写ui界面时因为手机分辨率大小不同,所以展现出来的效果也是不同的,这个时候就需要考虑适配器,让根据手机分辨率自动适配相应尺寸来展示界面,可以提高用户的体验感. 1.首先安装插件ScreenMatch,安装成功之后android studio会提示重启 2.在res->values下创建一个dimens文件,将以下代码复制进去.如果不创建这个文件一下操作会不成功导致项目重启. <dimen name="common_margin">@dimen/dp_15</

  • springboot集成mybatis-maven插件自动生成pojo的详细教程

    1.生成springboot项目,选择mybatis.mysql(略过) 2.搭建mysql环境,打开服务,记录用户名及密码,新建业务表. 3.在resources文件夹下新建如图所示文件夹: 4.包路径配置(记住自己存放的路径,后面用): 5.在generator中新建文件generatorConfig.properties(统一存放需要的变量).generatorMapper.xml 6.generatorConfig.properties内容如下,(mysql的jdbc.url一定要加时区

  • Eclipse下编写java程序突然不会自动生成R.java文件和包的解决办法

    下面给大家介绍几种比较常见的解决办法,具体内容如下: 1.有时候eclipse不自动编译,把project clean一下,让R.java重新生成 2.选择菜单 Project >> Clean ,前提是勾选上 Bulid Automatically(自动构建部署) , 点Clean后会重新构建项目,因为一般情况下,R.java文件在这个时候会重新更新生成一边,如果工程有错,就不会自动生成. 3.选择工程,右键 Android Tools >> Fix Project Proper

  • 利用json2POJO with Lombok 插件自动生成java类的操作

    前言 很多时候,我们定义接口或者调用别人的接口时,手里只有一份接口文档,文档中提供一段示例json格式的报文,我们需要根据json中的字段,挨个去定义java POJO 的字段属性. 属实费劲,且有时候万一手抖,个别字段填错了,就导致前后端联调不能一次性成功. 如果能有办法将json直接生成java POJO,岂不是能省去很多时间. 1.安装idea 插件 打开preferences → Plugins → marketplace → 输入:json2Pojo with Lombok,点击安装并

  • 通过命令行生成vue项目框架的方法

    本文介绍了通过命令行生成vue项目框架的方法,现在分享给大家 -- 安装nodejs 用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的, 所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识: nodejs安装: http://www.jb51.net/article/113457.htm npm 介绍: http://www.jb51.net/article/87893.htm -- 安装命令行工具 npm inst

  • Android Studio自动生成UML关系图的方法步骤

    目录 1.安装Sketch It 2.安装"PlantUML Integration"插件 3. 问题 1.安装Sketch It 这是我的AS版本: 如下步骤: 如下图等待插件全部加载后,搜索"Sketch It"插件安装: 如果安装无效自行到红色框框提示的主页下载手动安装: 选中文件等待安装完毕即可: 如此如下图点击Tools下的"Sketch It!..."按钮即可: 生成"xxx.plantuml"文件: 2.安装&q

随机推荐