npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-cli-plugin-tsx-autorouter

v1.3.8

Published

vue cli plugin to auto add router tsx

Downloads

365

Readme

vue-cli-plugin-autorouter

借鉴 Nuxt.js 的路由源码实现。可以根据存放Vue-Router页面的文件夹结构自动生成Vue-Router配置文件。

相信我,你会中毒的,妈妈再也不用担心我手动低效的去Ctrl + CCtrl + V了,一切交给插件自动生成路由配置文件,我们要做的就是按照规则维护好文件夹结构,世界突然美妙了。

注意:这个插件目前为止还没有改成通用的插件包,有这个考虑。不过现阶段主要用于 Vue3template 这个脚手架项目。后面还会考虑再开发一个脚手架项目的cli命令行工具,实现类似Vue-cli通过命令进行项目的初始化等功能。

1:安装(Vue3template默认已安装配置好,可直接使用)

注意这是一个基于Vue-cli 3.0也就是 vue-cli-service 开发的插件,不支持老版本Vue 2.0的脚手架哦,请注意了!

vue add vue-cli-plugin-autorouter

add安装的时候会自动向你项目的package.jsondevDependencies注入下面依赖:

"glob": "^7.1.3",
"pify": "^4.0.1"

这是 vue-cli-service插件开发Generator自动注入的,也是本插件需要使用到的依赖。请勿随意删除。

2:配置

vue.config.js中你可以增加pluginOptions配置节点,实现对插件的自定义化需求定制:

module.exports = {
  // ...
  pluginOptions: {
    route: {
     // 默认:page。存放Vue路由页面的文件夹名称
     TemplateFolderName: 'page',
     // 默认:./src/application。从src/开始到TemplateFolderName文件夹父一级文件夹相对路径              
     RootFolderName: './src/application',  
     // 默认 src/core/config/route.config.ts。生成的配置文件保存路径,相对插件的位置来。
     SaveConfigPath: '../../../src/core/config/route.config.ts' 
    }
  },
  // ...
}

然后你就可以很爽的直接使用命令,注意这个命令是用来自动生成配置文件的:

vue-cli-service route

注意:每次项目新增页面后,请重新执行此命令用以生成新的路由配置文件!!

不过,推荐在项目的package.json中做如下配置:

"scripts": {
    "serve": "npm run route && vue-cli-service serve",
    "route": "vue-cli-service route",
    "build": "vue-cli-service build",
  },

注意:一定要在 vue-cli-service serve命令运行前,先跑vue-cli-service route来扫描src/application/page的文件结构进而自动生成Vue-Router的配置文件。默认配置文件保存在:src/core/config/route.config.ts中。

3:卸载

东西再好,总有些开发者拒绝学习,或者拒绝尝试新的东西,喜欢固守自己已熟知的技术栈,那么下面提供卸载Vue3template自带的 vue-cli-plugin-autorouter教程。

3.1: 删除依赖(两种方式)

  • 1: 使用npm命令卸载依赖:
npm uninstall --save glob pify vue-cli-plugin-autorouter
  • 2: 从package.json中手动删除下面依赖信息
 "glob": "^7.1.3",
 "pify": "^4.0.1",
 "vue-cli-plugin-autorouter": "^1.1.8",

然后删除项目node_modules,在重新npm i

3.2: vue.config.js

vue.config.js中你删除pluginOptions配置节点。

3.3: 修改源码

1: 从src/core/config中删除文件route.config.ts

2:然后修改:index.config.ts,去除:import { AutoRoutesConfig } from './route.config';

3:之后修改:RouterConfigUrl中的routes对象,routes对象的内容需要你自己手动

注意:RouterConfigUrl 中的 routes 需要你自己手动配置了,这里提供一份配置参考:

 public static RouterConfigUrl: RouterOptions = {
    mode: 'hash',
    routes: [
      {
        name: "user",
        path: "/user",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
        meta: {}
      },
      {
        name: "user-one",
        path: "/user/one",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/one.vue'),
        meta: {}
      },
      {
        name: "index",
        path: "/",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
        meta: {}
      }
    ]
  }

【新增功能】4:路由meta配置

page/文件夹的组件中使用可以直接使用自定义标签<route-meta></route-meta>来实现对路由meta的直接配置,插件会提取<route-meta></route-meta>中的代码直接注入到生成的路由配置文件中。下面请看使用案例:

<route-meta>
  {
    "isLogin": false,
    "title": "首页"
  }
</route-meta>
<template lang="pug">
  .home
    h2 测试标题
</template>

注意这里route-meta标签中填的必须是一个JSON对象,注意书写格式,不能有误!!

那么自动生成的路由配置如下:

{
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: 'index' */ '@/page/index.vue'),
    meta: {
      isLogin: false,
      title: "首页"
    }
}

5:使用

这里使用请注意文件夹结构,多看几次下面的例子加强理解,以便能够更好的组织自己的路由结构!!

5.1: 基础路由

基础路由很简单,直接在page/文件下新建vue组件即可,插件会根据文件结构自动生成路由配置文件!!

假设 page 的目录结构如下:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么自动生成的路由配置如下:

[
  {
    name: "user",
    path: "/user",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
    meta: {}
  },
  {
    name: "user-one",
    path: "/user/one",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/one.vue'),
    meta: {}
  },
  {
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
    meta: {}
  }
]

5.2: 动态路由(带参数)

如果路由需要参数,那么可以按照命名的规则:_参数名.vue,在user/文件夹创建Vue组件。例如这里的:_id.vue,其实这里的 _id.vue就相当于我们平时开发时用的user_info.vue组件。

假设 page 的目录结构如下:

page/
--| user/
-----| _id.vue
--| index.vue

那么自动生成的路由配置如下:

[
  {
    name: "user-id",
    path: "/user/:id?",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
    meta: {}
  },
  {
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
    meta: {}
  }
]

这里我们有了user-id组件(相当于 user_info.vue),那么user首页组件如何添加?其实很简单!

基于上面的文件结构在user/里面在创建一个index.vue组件即可,默认文件夹下面的index.vue作为路由的首页

改变后的文件结构如下:

page/
--| user/
-----| _id.vue   # 这个相当于平时开发的 user_info.vue,个人中心的详情页面
-----| index.vue # user首页,类似个人中心
--| index.vue

那么自动生成的路由配置如下:

[
  {
    name: "user",
    path: "/user",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
    meta: {}
  },
  {
    name: "user-id",
    path: "/user/:id",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
    meta: {}
  },
  {
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
    meta: {}
  }
]

5.3: 嵌套路由

创建内嵌子路由,上面我们已经有了user/文件夹,那么我们可以在user/文件夹同级目录创建一个名字一样的Vue组件,这里添加:user.vue!

假设 page 的目录结构如下:

page/
--| user/
-----| _id.vue
-----| index.vue
--| user.vue
--| index.vue

那么自动生成的路由配置如下:

[
  {
    path: "/user",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/user.vue'),
    meta: {},
    children: [
      {
        name: "user",
        path: "",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/index.vue'),
        meta: {}
      },
      {
        name: "user-id",
        path: ":id",
        component: () => import(/* webpackChunkName: '[request]' */ '@/page/user/_id.vue'),
        meta: {}
      }
    ]
  },
  {
    name: "index",
    path: "/",
    component: () => import(/* webpackChunkName: '[request]' */ '@/page/index.vue'),
    meta: {}
  }
]

记住:这是嵌套路由所以别忘记在user.vue组件中添加:router-view 来展示子路由的页面。