亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

kviccn / 1154人閱讀

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

一款自動生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin 在項目中試點成功了，現(xiàn)在在項目中已經(jīng)不需要再維護路由配置文件了，由插件自動生成，節(jié)省了大家維護路由的時間。

從長遠來看，使用插件自動生成路由是具有一定好處的。當(dāng)項目中的路由配置非常多的時候，為了區(qū)分業(yè)務(wù)，你可能需要分成許多個文件來存放這些路由文件，這樣就不得不去維護這些路由文件。

比如這樣的路由文件結(jié)構(gòu)：

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

其中 childrenRouters 目錄中維護了各個業(yè)務(wù)相關(guān)的路由。

每當(dāng)要添加路由的時候，還得重復(fù)的寫 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",
  },
  // ...
]

當(dāng)一個項目的路由配置多了以后，要維護這些路由文件也是一件費時費神的事情。

現(xiàn)在使用 vue-route-webpack-plugin 插件來自動生成路由后，就無需再關(guān)心和維護這些路由文件了。

使用方式

注：以下摘自倉庫 README，如有更新以倉庫為準(zhǔn)

安裝 
$ 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文件中加入路由配置：

假設(shè)在 user.vue 文件中：

默認情況下，當(dāng)你啟動開發(fā)服務(wù)或執(zhí)行構(gòu)建的時候，就會在src/router目錄下生成children.js這個路由文件。

假設(shè)你的頁面文件路徑是：src/views/user/list.vue，那么生成的路由文件的內(nèi)容看起來就會是這樣的：

import userlist from "@/views/user/list.vue";

export default [
  {
    path: "user/list",
    name: "userlist",
    component: userlist,
    // 如果配置了別名
    alias: "user",
  },
]

因為這個文件會由插件自動生成，所以你可以在 .gitignore 文件中把這個路由文件在版本庫中忽略掉，避免多人協(xié)同開發(fā)時因頻繁改動發(fā)生沖突。

默認目錄約定 
src/
  |-views/         (項目文件，插件會掃描該目錄下所有 .vue 文件的路由配置)
    |-...
  |-router/        (路由目錄)
    |-index.js     (主路由文件，需要引入 children.js 作為子路由來使用)
    |-children.js  (路由文件，由插件自動生成)
選項參考

插件提供了以下這些選項供自定義配置

new VueRouteWebpackPlugin({
  // 文件擴展名，默認只查詢 .vue 類型的文件，根據(jù)實際需要可以進行擴展
  extension: ["vue", "js", "jsx"],
  // 插件掃描的項目目錄，默認會掃描 "src/views" 目錄
  directory: "src/views",
  // 生成的路由文件存放地址，默認存放到 "src/router/children.js"
  routeFilePath: "src/router/children.js",
})

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109985.html

相關(guān)文章

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

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

    MkkHou 評論0 收藏0

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

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

    huhud 評論0 收藏0

  • vue開發(fā)看這篇文章就夠了

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

    fsmStudy 評論0 收藏0

  • webpack+vue項目實戰(zhàn)（一,搭建運行環(huán)境和相關(guān)配置）

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

    jemygraw 評論0 收藏0

  • 詳解Vue服務(wù)端渲染

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

    Paul_King 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<