vite与webpack的一些技巧

通常项目里会有很多的api与导入导出,为了避免过多而提高效率
vue3的使用过程中:可以读取文件然后异步的获取挂载在属性上面
虽然我知道按需的好处,但有时候很急效率至少就没办法考虑性能,
所以频繁的导出与import导入使用变量申明也是很拖慢进度。

虽然不提倡做法,但效率确实提高很多

import * as vue from 'vue'
import * as router from 'vue-router'
import * as store from './stores/index.js'
export const install = function (app){app.config.globalProperties.$vue = vueapp.config.globalProperties.$router = routerapp.config.globalProperties.$store = store.default
}
```javascript

Promise.all([installApi(app)]).then(res => {
app.config.globalProperties.$getApi = function(file_url){
return app.config.globalProperties.api[file_url]
}
app.mount(‘#app’)
})

import { ElMessage as message } from ‘element-plus’
/**

  • api 接口集成对象初始化
    /
    const api_list = Object.create(null)
    function file_name(path) {
    const s1 = //(.+).js$/
    path.match(s1)
    return RegExp.$1
    }
    export const installApi= async function (Vue) {
    const modules = import.meta.glob('@/apis/
    .js’);
    for (const path in modules) {
    const mod = modules[path]
    const name =
    file_name(path).split(‘/’).length > 1
    ? file_name(path).split(‘/’).join(‘_’)
    : file_name(path)
    let obj = await mod()
    let router = obj.default
    if (api_list[name]) {
    message({
    type: ‘error’,
    message: 接口名称重复: ${name},
    })
    return
    }
    api_list[name] = router
    // Vue.component(obj.default.name, obj.default)
    // arr.push(obj)
    }
    Vue.config.globalProperties.api = api_list
    // return arr
    return api_list
    }

webpack做法也大同小异 require.context使用内置函数读取文件,使用vite和webpack自带的提供读取文件的功能,我们可以制作组件 指令,插件,函数,变量,字典,接口,表单各种的自动注册,大量的减少很多没必要的麻烦,通常我们的后台curd的过程很多时候都是复制一样的curd操作,其实多时候都需要封装表格表单来完成复用,注册全局,虽然有时候找不到东西在哪,但我觉得留一点说明注释应该可以解决问题。```javascript
import { message } from 'ant-design-vue'
// const fs = require('fs')
const importAll = require.context('@/apis', true, /\.js$/)/*** api 接口集成对象初始化*/
const api_list = Object.create(null)
function file_name(path) {const s1 = /\/(.+).js$/path.match(s1)return RegExp.$1
}
importAll.keys().map((path) => {const name =file_name(path).split('/').length > 1? file_name(path).split('/').join('_'): file_name(path)const router = importAll(path).default || importAll(path)if (api_list[name]) {message.error('接口文件名字请不要重复')return}api_list[name] = router
})
/*** api 接口集成对象*/
// fs.writeFileSync('./apis/api.json', JSON.stringify(api_list), 'utf-8')
export const api = Object.freeze(api_list)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/220299.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zibll子比主题最新学习版

Zibll子比主题5.7.1是一款为WordPress平台设计的优秀主题。它具有独特而富有吸引力的设计风格,同时提供了丰富的功能和卓越的性能,使您的网站在众多网站中脱颖而出。以下是对Zibll子比主题5.7.1的详细介绍。 (这是我在“布谷鸟网址导航”上看…

minio可用性磁盘/节点故障恢复的研究

做poc真的很累。年初的报告拿出来按topic拿出来分享一下。 目的 通过模拟各类条件下的minio集群状态,确认minio是否符合官方“N/2硬盘在线,数据可读取;N/21硬盘在线,数据可读写”的描述。 同时通过停止minio集群中节点的服务停止…

粗到细语义(Coarse-to-Fine Semantics)

粗到细语义(Coarse-to-Fine Semantics)是一种深度学习模型的设计方法,它通过逐步细化的方式来理解文本中的语义信息。这种方法通常用于文本分类、情感分析、问答等任务中。 在粗到细语义中,模型首先从整体上理解文本的大致意思&a…

【计算机设计大赛作品】诗意千年—唐朝诗人群像的数字展现_附源码—信息可视化赛道获奖项目深入剖析【可视化项目案例-20】

🎉🎊🎉 你的技术旅程将在这里启航! 记得看本专栏里顶置的可视化宝典导航贴哦! 🚀🚀 本专栏为可视化专栏,包含现有的所有可视化技术。订阅专栏用户在文章底部可下载对应案例完整源码以供大家深入的学习研究。 🎓 每一个案例都会提供完整代码和详细的讲解,不论你…

Arris VAP2500 list_mac_address未授权RCE漏洞复现

0x01 产品简介 Arris VAP2500是美国Arris集团公司的一款无线接入器产品。 0x02 漏洞概述 Arris VAP2500 list_mac_address接口处命令执行漏洞,未授权的攻击者可通过该漏洞在服务器端任意执行代码,写入后门,获取服务器权限,进而控制整个web服务器。 0x03 复现环境 FOFA…

AIGC与数据安全

数据安全是指保护数据不受非法或恶意的访问、使用、修改、泄露或破坏的能力。数据安全可能导致以下几个方面的问题: ✜ 数据泄露:AIGC可能泄露隐私信息,如姓名、地址、身份证号、银行账号等,危害用户安全和利益。AIGC可能生成包含…

值得收藏:一份完整的Mysql高性能优化规范建议

数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来) 数据库对象的命名要能做到见名识意,并且最后不要超过32个…

ES客户端RestHighLevelClient的使用

1 RestHighLevelClient介绍 默认情况下,ElasticSearch使用两个端口来监听外部TCP流量。 9200端口:用于所有通过HTTP协议进行的API调用。包括搜索、聚合、监控、以及其他任何使用HTTP协议的请求。所有的客户端库都会使用该端口与ElasticSearch进行交互。…

如何在不同的操作系统和架构中构建Go应用程序

在软件开发中,重要的是要考虑要编译二进制文件的操作系统和底层处理器架构。由于在不同的操作系统/体系结构平台上运行二进制文件通常很慢,甚至不可能,因此通常的做法是为许多不同的平台构建最终的二进制文件,以最大限度地吸引程序的受众。然而,当用于开发的平台与要部署程…

【PTA刷题】 顺序表(删除)(代码+详解)

文章目录 题目C代码详解 题目 已知一组数据,采用顺序存储结构存储,其中所有的元素为整数。设计一个算法,删除元素值在[x,y]之间的所有元素 输入格式: 输入包含三行数据,第一行是表中元素个数,第二行是顺序表的各个元素…

OpenCV极坐标变换函数warpPolar的使用

学更好的别人, 做更好的自己。 ——《微卡智享》 本文长度为1702字,预计阅读4分钟 前言 前阵子在做方案时,得了几张骨钉的图片,骨科耗材批号效期管理一直是比较麻烦的,贴RFID标签成本太高,所以一般考虑还是…

Crow:黑魔法 添加路由3 绑定lambda

Crow:黑魔法2 new_rule_tagged实现模板参数的绑定-CSDN博客 template<uint64_t N> typename black_magic::arguments<N>::type::template rebind<TaggedRule>& new_rule_tagged(const std::string& rule) {using RuleT = typename black_magic::arg…

07.Go 流程控制

流程控制是Go语言中必不可少的一部分&#xff0c;也是整个编程基础的重要一环。Go语言的流程控制语句和其他编程语言的流程控制语句有些不同&#xff0c;主要体现在Go语言没有do-while语句。Go语言常用的流程控制包括if语句、switch语句、for语句及goto语句等&#xff0c;switc…

涉密网络的IP查询防护策略

涉密网络的安全性对于维护国家、企业及个人的核心利益至关重要。在当今数字化时代&#xff0c;网络攻击日益猖獗&#xff0c;其中IP查询是攻击者获取目标信息的一种常见手段。本文将探讨涉密网络中防护IP查询的关键策略&#xff0c;以确保网络的机密性和安全性。 1. 专用VPN和…

一个文件下png,jpg,jpeg,bmp,xml,json,txt文件名称排序命名

#utf-8 #authors 会飞的渔WZH #time:2023-12-13 import os# 要修改的图像所在的文件夹路径 root_path rD:\images\lines2\3 # 要修改的图像所在的文件夹路径filelist os.listdir(root_path) #遍历文件夹 print(len(filelist)) i0for item in filelist:if item.endswith(.…

《点云进阶》专栏文章目录

目录 一、PCL进阶篇* 二、Open3D进阶篇 一、PCL进阶篇 * PCL 最小二乘拟合二维直线PCL 最小二乘拟合空间直线PCL 计算点云的倒角距离&#xff08;Chamfer Distance&#xff09;PCL 点云配准精度评价——点到面的均方根误差PCL 可视化八叉树PCL 计算Hausdorff距离PCL 从变换矩…

@EventListener工作原理

EventListener 是 Spring Framework 提供的用于处理事件监听的注解。它的工作原理基于观察者设计模式&#xff0c;其中有一个事件发布者&#xff08;publisher&#xff09;和一个或多个事件监听者&#xff08;listener&#xff09;。 事件发布者&#xff08;Event Publisher&am…

使用 Timm 库替换 RT-DETR 主干网络 | 1000+ 主干融合RT-DETR

文章目录 前言版本差异说明替换方法parse_moedl( ) 方法_predict_once( ) 方法修改 yaml ,加载主干论文引用timm 是一个包含最先进计算机视觉模型、层、工具、优化器、调度器、数据加载器、数据增强和训练/评估脚本的库。 该库内置了 700 多个预训练模型,并且设计灵活易用。…

winform使用CefSharp嵌入VUE网页并交互

1、NuGet添加CefSharp 如果下载慢或失败可以更新下载源 腾讯资源https://mirrors.cloud.tencent.com/nuget/华为资源https://repo.huaweicloud.com/repository/nuget/v3/index.json 2、将项目平台改为X64 3、在winform窗体添加cef using CefSharp; using CefSharp.WinForms; u…

微信小程序如何跳转到网页

微信小程序可以使用wx.navigateToMiniProgram方法实现跳转到其他小程序&#xff0c;但是跳转到网页需要使用wx.navigateTo方法&#xff0c;并将所跳转的地址写在URL参数中。 例如&#xff0c;跳转到百度的网页可以使用以下代码&#xff1a; wx.navigateTo({url: https://www.…