当前位置： 首页 > news >正文

开发一个npm组件包（2）

news 2026/5/19 2:34:13

通过vue+element 原来后台 开发npm包的时候

会遇到一下几个问题

入口文件变化为package/index

在这里插入图片描述

需要再配置打包方法 package.json下

"scripts": {"package": "vue-cli-service build --target lib ./src/package/index.js --name managerpage --dest managerpage/lib"},

一般组件包中是不能使用$router,$store的 会出现挂载错误的问题 但是包里面元代码中有$store怎么处理

包文件

在这里插入图片描述

使用 读取包中store/module 中user信息

import managerStore from '@/store/index.js' 用法 managerStore.state.user.userInfo

项目中不能使用svg

  • 可以使用img但是需要打包的时候转换为base64 主项目才能使用
  • svg 需要使用在线cdn 或者自己图标才能在主项目使用

关于css问题

  • npm打包以后css样式错误，问题原因是managerpage.css中/fonts/element.ttf路径寻找错误，修改publicPath进行处理
  • vue.config.js
  • 在这里插入图片描述

接口

  • 接口不能再读取env下配置
  • 采用为全局windows.url
  • 在这里插入图片描述
    在这里插入图片描述

大家有遇到其他问题可以在补充 一起学习

相关文章：

开发一个npm组件包（2）

通过vueelement 原来后台 开发npm包的时候 会遇到一下几个问题 入口文件变化为package/index 需要再配置打包方法 package.json下 "scripts": {"package": "vue-cli-service build --target lib ./src/package/index.js --name managerpage --dest…...

编程日记 2023/10/14 5:08:33

迅为RK3568开发板Scharr滤波器算子边缘检测

本小节代码在配套资料“iTOP-3568 开发板\03_【iTOP-RK3568 开发板】指南教程\04_OpenCV 开发配套资料\33”目录下，如下图所示： 在 Sobel 算子算法函数中，如果设置 ksize-1 就会使用 3x3 的 Scharr 滤波器。Scharr 算子是 Soble 算子在 ksize…...

编程日记 2023/10/14 5:07:33

HJ86 求最大连续bit数

目录 一、题目 二、代码 一、题目 求最大连续bit数_牛客题霸_牛客网 二、代码 #include <iostream> #include<stack> #include<vector> using namespace std; void TEN_to_TWO(int x, vector<int>& data) { //10进制转换成二进制stack<int&…...

编程日记 2023/10/14 5:06:31

Grafana 10 新特性解读：体验与协作全面提升

作者&#xff1a;徽泠(苏墨馨) 为了庆祝 Grafana 的 10 年里程碑&#xff0c;Grafana Labs 推出了 Grafana 10&#xff0c;这个具有纪念意义的版本强调增强用户体验&#xff0c;使各种开发人员更容易使用。Grafana v10.0.x 为开发者与企业展示卓越的新功能、可视化与协作能力&…...

编程日记 2023/10/14 5:05:29

Django实现音乐网站 ⒆

使用Python Django框架做一个音乐网站&#xff0c; 本篇主要为排行榜功能及音乐播放器部分功能实现。 目录 推荐排行榜优化 设置歌手、单曲跳转链接 排行榜列表渲染优化 视图修改如下&#xff1a; 模板修改如下&#xff1a; 单曲详情修改 排行榜列表 设置路由 视图处理…...

编程日记 2023/10/14 5:04:29

20基于MATLAB的车牌识别算法，在环境较差的情景下，夜间识别度很差的车牌号码可以精确识别出具体结果，程序已调通，可直接替换自己的数据跑。

基于MATLAB的车牌识别算法&#xff0c;在环境较差的情景下&#xff0c;夜间识别度很差的车牌号码可以精确识别出具体结果&#xff0c;程序已调通&#xff0c;可直接替换自己的数据跑。 20matlab车牌识别 (xiaohongshu.com)...

编程日记 2023/10/14 5:03:26

vue音频制作

Vue 音频制作指的是使用 Vue.js 框架开发音频制作相关的 Web 应用程序。Vue.js 是一种现代化的 JavaScript 框架&#xff0c;它可以帮助开发者更快速、更高效地构建交互式的 Web 应用程序。 音频制作在 Vue.js 中的实现可以通过使用一些开源音频库和插件来实现&#xff0c;如 …...

编程日记 2023/10/14 5:02:25

好莱坞编剧大罢工终于结束；与OpenAI创始人共进早餐；使用DALL-E 3制作绘本分享；生成式AI的基础设施架构 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f525; 好莱坞编剧大罢工终于结束&#xff1a;简单说就是AI妥协了 https://www.wgacontract2023.org/the-campaign/summary-of-the-2023-wga-…...

编程日记 2023/10/14 5:01:23

buuctf week2-web-ez_sql

闭合之后尝试判断字段数&#xff0c;存在WAF&#xff0c;使用大小写绕过&#xff08;后面的sql语句也需要进行大小写绕过&#xff09; ?id1 Order by 5-- 测出有5列 ?id1 Order by 6-- 查一下数据库名、版本、用户等信息 ?id1Union Select database(),version(),user(),4,…...

编程日记 2023/10/14 5:00:21

实验2.1.2 交换机的常用配置

项目2 交换技术的位置 活动2 交换机的常用配置 一、具体要求&#xff1a; &#xff08;1&#xff09;添加1台计算机&#xff0c;将标签名更改为PC1。 &#xff08;2&#xff09;添加1台S3700-26C-HI交换机&#xff0c;标签名为SWA&#xff0c;将交换机的名称设置为SWA。 &am…...

编程日记 2023/10/14 4:59:19

功率放大器应用场景分析报告

功率放大器作为一种能够将低电压信号放大到高电压水平的关键设备&#xff0c;在多个领域中发挥着重要作用。报告通过对实验研究、射频通信、能源与电力系统、医疗诊断与治疗以及工业自动化等领域的综合分析&#xff0c;下面西安安泰为大家介绍功率放大器的应用场景。 实验研究 …...

编程日记 2023/10/14 4:58:17

解决 Centos 安装 Python 3.10 的报错： Could not import runpy module

操作环境&#xff1a;CentOS 7、Gcc 4.8.5、Python 3.10.0 系统上已经有 2.x&#xff0c;3.6 版本的 Python 了&#xff0c;但是还是想装一个 3.10 的。因为刚写的脚本文件是较高版本的&#xff0c;在 3.6 上无法正常运行&#xff0c;Python 语法不是很了解&#xff0c;只能从…...

编程日记 2023/10/14 4:57:16

HTML5简介-HTML5 新增语义化标签-HTML5 新增多媒体标签

一、HTML5简介 HTML5&#xff0c;全称为HyperText Markup Language 5&#xff0c;是HTML的第五个版本&#xff0c;由万维网联盟&#xff08;World Wide Web Consortium&#xff0c;W3C&#xff09;和Web Hypertext Application Technology Working Group&#xff08;WHATWG&am…...

编程日记 2023/10/14 4:56:15

pyqt---子线程进行gui操作导致界面崩溃

在 PyQt&#xff08;或 Qt 通常&#xff09;中&#xff0c;您不能直接在子线程中执行与 GUI 相关的操作。这可能会导致应用程序崩溃或不可预测的行为。所有与 GUI 相关的操作都应该在主线程中执行。 如果您需要在子线程完成某些操作后显示一个消息框&#xff0c;可以使用 PyQt…...

编程日记 2023/10/14 4:54:13

vue-cli 输出的模板 html 文件使用条件语句

背景 项目使用的是 vue-cli 脚手架&#xff0c;需要根据不同环境的配置&#xff0c;在输出的 html 模板中使用条件语句来生成不同的代码。 环境变量 在 .env.development 中&#xff0c;定义环境变量 VUE_APP_DISABLE_IP_ACCESStrue使用条件语句 第一种方法&#xff0c;使…...

编程日记 2023/10/14 4:53:11

Spring Boot集成kafka的相关配置

引入依赖&#xff1a; 额外依赖只需要这一个&#xff0c;kafka-client 不是springboot 的东西&#xff0c;那是原生的 kafka 客户端&#xff0c; kafka-test也不需要&#xff0c;是用代码控制broker的东西。 <dependency><groupId>org.springframework.kafka</g…...

编程日记 2023/10/14 4:52:11

Git（11）——Git相关问题解答以及常用命令总结

目录 一、简介 二、问题 三、常用命令总结 一、简介 本篇文章将介绍作者在学习Git的过程所遇到的困惑以及熟悉Git后总结的常用命令 二、问题 ①Git配置的邮箱和用户名和Git的ssh密钥有什么联系&#xff1f;假如我使用Gitlab在张三这个账户上配置了ssh公钥&#xff0c;但是…...

编程日记 2023/10/14 4:51:09

【LeetCode高频SQL50题-基础版】打卡第7天：第36~40题

文章目录 【LeetCode高频SQL50题-基础版】打卡第7天&#xff1a;第36~40题⛅前言按分类统计薪水&#x1f512;题目&#x1f511;题解 上级经理已离职的公司员工&#x1f512;题目&#x1f511;题解 换座位&#x1f512;题目&#x1f511;题解 电影评分&#x1f512;题目&#x…...

编程日记 2023/10/14 4:50:08

C++入门1

C入门1 1.前言2.命名空间1.C语言对于命名空间方面的缺陷2.命名空间的语法特性1.域作用限定符2.命名空间的可嵌套性 3.声明与定义分离的命名空间4.命名空间的展开5.多个命名空间中命名冲突6.对于命名空间的推荐写法 3.iostream1.cout和endl2.cin 3.缺省参数1.缺省参数的形式2.缺…...

编程日记 2023/10/14 4:49:06

Matlab论文插图绘制模板第118期—进阶气泡图

之前的文章中&#xff0c;分享过Matlab气泡图的绘制模板&#xff1a; 图虽说好看&#xff0c;但有一个缺点&#xff1a;需要手动调节两个图例的位置。 为了解决这一问题&#xff0c;我们不妨结合前段时间分享的紧凑排列多子图的绘制模板&#xff1a; 从而达到自动对齐排列的效…...

编程日记 2023/10/14 4:47:03

ncmdump技术解析：网易云音乐NCM加密格式的逆向工程与转换实现原理

ncmdump技术解析&#xff1a;网易云音乐NCM加密格式的逆向工程与转换实现原理 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 项目技术定位与核心价值 ncmdump是一款专注于网易云音乐NCM加密格式逆向解析的开源工具&#xff0c;通过…...

编程新知 2026/5/19 2:02:40

现代Web全栈技术栈实践：从Next.js到PostgreSQL的标准化开发方案

1. 项目概述&#xff1a;一个现代Web应用的技术栈实践最近在技术社区里看到一个挺有意思的项目&#xff0c;叫stack-wuh/x.wuh.site。光看这个名字&#xff0c;可能有点摸不着头脑&#xff0c;但拆解一下就能明白&#xff0c;这本质上是一个关于“技术栈”的实践项目。stack-wu…...

编程新知 2026/5/19 0:47:48

Go语言交互式命令行工具开发：promptui库核心原理与实战应用

1. 项目概述&#xff1a;一个交互式命令行提示工具如果你经常在终端里写脚本&#xff0c;或者开发一些需要用户交互的命令行工具&#xff0c;那么对“如何优雅地获取用户输入”这个问题&#xff0c;一定深有感触。传统的read -p或者input()函数&#xff0c;功能单一、界面简陋&…...

编程新知 2026/5/19 0:22:09

【绝密级】航天科研院所NotebookLM部署红线清单：绕过敏感数据泄露风险的6层沙箱隔离架构（附工信部备案编号参考）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM航天科学研究 NotebookLM 是 Google 推出的基于 AI 的研究协作者工具&#xff0c;其核心能力在于对用户上传的私有文档进行深度语义理解与上下文关联推理。在航天科学研究场景中&#xff0c;…...

编程新知 2026/5/19 0:18:02

Linux SSH 安全加固 + 秘钥登录 + 日志排错 + 时间同步 + 文件传输全套实战

以susan身份秘钥登录server、以root身份秘钥登录server #1、生成密钥 [susanclient ~ 16:42:13]$ ssh-keygen Generating public/private rsa key pair.#2、回车代表密钥为空 Enter file in which to save the key (/home/susan/.ssh/id_rsa): Enter passphrase (empty for no…...

编程新知 2026/5/18 22:13:32

STM32 GPIO八种配置模式详解：从推挽输出到模拟输入实战指南

1. 项目概述&#xff1a;从“点灯”到“通信”&#xff0c;GPIO配置是嵌入式开发的基石如果你玩过STM32&#xff0c;哪怕只是点个灯&#xff0c;也一定和GPIO打过交道。但很多人对GPIO的理解&#xff0c;可能就停留在“输出高电平灯亮&#xff0c;输出低电平灯灭”的层面。实际…...

编程新知 2026/5/18 22:13:07

法学博士论文降重+溯源双突破：NotebookLM文献脉络追踪功能（实测引用准确率98.6%，超人工校验）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM法学研究辅助的范式变革 传统法学研究长期依赖人工检索、逐条比对判例与法条、手工整理文献脉络&#xff0c;知识关联深度受限于研究者个体经验与时间成本。NotebookLM 的引入&#xff0c;标…...

编程新知 2026/5/18 21:52:29

如何用VR-Reversal在普通屏幕上观看VR视频：3分钟免费转换指南

如何用VR-Reversal在普通屏幕上观看VR视频&#xff1a;3分钟免费转换指南 【免费下载链接】VR-reversal VR-Reversal - Player for conversion of 3D video to 2D with optional saving of head tracking data and rendering out of 2D copies. 项目地址: https://gitcode.co…...

编程新知 2026/5/18 21:47:53

终极指南：如何用FFXIV TexTools模组管理器轻松定制最终幻想14外观

终极指南&#xff1a;如何用FFXIV TexTools模组管理器轻松定制最终幻想14外观 【免费下载链接】FFXIV_TexTools_UI 项目地址: https://gitcode.com/gh_mirrors/ff/FFXIV_TexTools_UI FFXIV TexTools模组管理器是《最终幻想14》玩家社区中最强大的外观定制工具&#xff…...

编程新知 2026/5/18 20:07:24

5步解锁显卡隐藏性能：NVIDIA Profile Inspector全面指南

5步解锁显卡隐藏性能&#xff1a;NVIDIA Profile Inspector全面指南 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 想要让显卡发挥100%性能潜力吗&#xff1f;NVIDIA Profile Inspector作为一款专业的…...

编程新知 2026/5/18 18:20:18