使用 webpack 插件自動生成 vue 路由文件

kviccn 發布于2019-08-26 14:04 / 1087人閱讀

摘要：從長遠來看，使用插件自動生成路由是具有一定好處的?，F在使用插件來自動生成路由后，就無需再關心和維護這些路由文件了。

一款自動生成 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 文件中：

默認情況下，當你啟動開發服務或執行構建的時候，就會在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",
})

云服務器 GPU云服務器 vue插件 webpack使用 webpack 使用公用cdn vue使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109985.html

【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全，對插件源碼進行了詳細解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏前言骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

huhud 2019-08-02 16:07 評論0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學習的部分。包括因為可能信息面不全，對插件源碼進行了詳細解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏前言骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

MkkHou 2019-08-23 14:07 評論0 收藏0
vue開發看這篇文章就夠了

摘要：注意此處獲取的數據是更新后的數據，但是獲取頁面中的元素是更新之前的鉤子函數說明組件已經更新，所以你現在可以執行依賴于的操作。鉤子函數說明實例銷毀 Vue -漸進式JavaScript框架介紹 vue 中文網 vue github Vue.js 是一套構建用戶界面(UI)的漸進式JavaScript框架庫和框架的區別我們所說的前端框架與庫的區別？ Library 庫，本質上是一...

fsmStudy 2019-08-21 18:37 評論0 收藏0
webpack+vue項目實戰（一,搭建運行環境和相關配置）

摘要：運行環境是，其它版本的小小伙伴要注意版本兼容的問題喔好了，首頁在創建項目目錄，下面進行項目的第一步，搭建環境。附上代碼附上代碼路由控制和接下來就配置入口文件，和入口文件的模板了。 1.前言現在正在開發一個公司的后臺管理項目，項目是一個單頁面應用。功能上就是管理銷售訂單的各個環節，包括物流管理，回款管理，訂單管理等等的功能。這些就不多說了。項目是，基于webpack3,vue2.2.6...

jemygraw 2019-08-20 17:44 評論0 收藏0
詳解Vue服務端渲染

摘要：二服務端渲染初體驗使用的服務端渲染功能，需要引入提供的服務端渲染模塊，其作用是創建一個渲染器，該渲染器可以將實例渲染成字符串。詳解Vue服務端渲染一、服務端渲染 - 簡介所謂服務端渲染就是將代碼的渲染交給服務器，服務器將渲染好的html字符串返回給客戶端，再由客戶端進行顯示。服務器端渲染的優點有利于SEO搜索引擎優化，因為服務端渲染是將渲染好的html字符串返回給了客戶端，...

Paul_King 2019-08-26 10:33 評論0 收藏0