成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

使用 webpack 插件自動(dòng)生成 vue 路由文件

kviccn / 1155人閱讀

摘要：從長(zhǎng)遠(yuǎn)來(lái)看，使用插件自動(dòng)生成路由是具有一定好處的。現(xiàn)在使用插件來(lái)自動(dòng)生成路由后，就無(wú)需再關(guān)心和維護(hù)這些路由文件了。

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

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

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

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

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

每當(dāng)要添加路由的時(shí)候，還得重復(fù)的寫 import 和路由配置項(xiàng)。

比如：

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)一個(gè)項(xiàng)目的路由配置多了以后，要維護(hù)這些路由文件也是一件費(fèi)時(shí)費(fèi)神的事情。

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

使用方式

注：以下摘自倉(cāng)庫(kù) README，如有更新以倉(cāng)庫(kù)為準(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({
        // 選項(xiàng)，見(jiàn)下文
      })
    ],
  }
};
使用

在需要配置路由的頁(yè)面級(jí).vue文件中加入路由配置：

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

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

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

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

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

因?yàn)檫@個(gè)文件會(huì)由插件自動(dòng)生成，所以你可以在 .gitignore 文件中把這個(gè)路由文件在版本庫(kù)中忽略掉，避免多人協(xié)同開(kāi)發(fā)時(shí)因頻繁改動(dòng)發(fā)生沖突。

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

插件提供了以下這些選項(xiàng)供自定義配置

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109985.html

相關(guān)文章

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

    摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過(guò)很多專欄以及文章，此次實(shí)踐中還是遇到需要學(xué)習(xí)的部分。包括因?yàn)榭赡苄畔⒚娌蝗?，?duì)插件源碼進(jìn)行了詳細(xì)解讀，希望對(duì)于將要在項(xiàng)目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過(guò)很多專欄以及文章，此次實(shí)踐中還是...

    MkkHou 評(píng)論0 收藏0

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

    摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過(guò)很多專欄以及文章，此次實(shí)踐中還是遇到需要學(xué)習(xí)的部分。包括因?yàn)榭赡苄畔⒚娌蝗?，?duì)插件源碼進(jìn)行了詳細(xì)解讀，希望對(duì)于將要在項(xiàng)目中搭建骨架屏的小伙伴們有所幫助。 如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏 前言 骨架屏的用戶感知比loading更好，此前看過(guò)很多專欄以及文章，此次實(shí)踐中還是...

    huhud 評(píng)論0 收藏0

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

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

    fsmStudy 評(píng)論0 收藏0

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

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

    jemygraw 評(píng)論0 收藏0

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

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

    Paul_King 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<