ts开发npm依赖包(插件)demo

news2024/9/25 21:24:21

序:涉及如下几个点

        1、用js开发依赖包(换个说法:你在开发第三方的\node_modules的插件了)

        2、用ts开发依赖包

        3、解决本地开发的npm包重命名后不生效的问题

一、js版(简单的)

        

你直接在你的项目的\node_modules新建一个cyc文件夹

package.json部分

{
  "name": "cycx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

 index.js

exports.run = function() {
  console.log('博主的公众号是:程序员实用资源,菜单有程序员网址导航、也有加微信群方式');
}

然后,打开你项目单页面

直接运行你的vue项目就可以用啦~~~~~~

 但是!

如果你依赖已经放进去之后,你改名了!!!!!!!看下面↓↓↓↓↓↓↓↓↓

二、解决本地开发的npm包重命名后不生效的问题

 去你依赖包里找到  .vite 的文件,在!你项目停止运行的时候!删掉他,然后你在npm run dev你的项目!!!!!记得要关闭编辑器!关闭你的 cmd命令符,重新打开重新输入命令!!!!说多了都是泪,他就会自动在重新去找你重命名之后的路径了!!!,说道这里去给我关注博主的公众号“程序员野区”,菜单有好东西

三、用ts开发依赖包

 就3个文件     src、package.json、tsconfig.json(生成后在改)

dist是生成的,node_modules、package-lock.json是你npm install的,所以你不用建

先复制我三个文件

index.ts

export const sss=1;

 package.json

{
  "name": "cyc-admin-plug",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "npx tsc -p .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    
  }
}

然后打开命令符

输入下面代码,注意了,是npm!不是cnpm!

npm install --save-dev typescript@5.0.2

这里注意typescript@5.0.2版本最好是跟你本地项目一个版本,如果你直接npm install --save-dev typescript,你到时候项目vue+ts用的ts5.12,他就会变成是在你build的时候ts2个版本都打包了!!!!体积变大!

修改tsconfig.json(我忘记是我自己新建的还是安完ts后生成的!)你们看  没有这tsconfig.json 新建就是了

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
	"lib": ["dom", "es6", "es7","es2019","es2020"],
    "strict": true
  }
}

然后打开命令符

npm run build

目录就跟博主一样了

然后你把整个包都丢 项目的node_modules依赖里

vuets的package.json 引入

"cyc-admin-plug":"^1.0.0",

 你vue单页引用

<script setup lang="ts">
    import {sss}from "cyc-admin-plug";
    console.log(sss)

这样就可以了,如果你卡到vuets其他问题也可以到博主公众号下留言:“程序员野区”

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

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

相关文章

ndp48-web.exe_ndp48-x86-x64-allos-enu.exe_ndp48-x86-x64-allos-chs.exe下载地址

ndp48-web.exe、ndp48-x86-x64-allos-enu.exe、ndp48-x86-x64-allos-chs.exe下载地址 我发现网上几乎找不到地方直接下载&#xff0c;费了我九牛二虎的搜商&#xff0c;才发现原来可以这么下载。 我们可以去微软官方地址下载&#xff1a;下载 .NET Framework 4.8

react 利用antd-mobile实现楼层效果

首先是js模块 import React, { useEffect, useRef, useState } from react import { SideBar } from antd-mobile import ./louceng.css import { useThrottleFn } from ahooksconst items [{ key: 1, title: 第一项, text: <div>12313212313第一项12313212313第一项1…

图床项目之公网发布和测试

项目发布和测试 一、http服务测试1.1、ab http压力测试1.2、post测试&#xff08;注册请求和登录请求&#xff09; 二、性能测试2.1、生成测试脚本2.2、上传测试2.2.1、单客户端测试本地上传到本机服务器2.2.2、如果使用集群的方式进行测试 2.3、下载测试2.4、删除测试2.5、测试…

Vivado2018.3安装教程

1 下载安装包 这个软件是免费的&#xff0c;去官网注册即可完成下载。 https://www.xilinx.com/support/download/index.html/content/xilinx/en/downloadNav/vivado-design-tools/archive.html 2 解压安装包 注意&#xff1a;安装包需要解压到一个全英文路径 3 安装 1.双…

linux与windows趣味谈

文章目录 前言linux&windows两者常见的系统版本系统安装版本选择linux和windows使用体验聊聊折腾收获Linux系统使用技巧 前言 windows和linux同为常见的操作系统&#xff0c;相信大部分人对widows比较熟悉一点&#xff0c;对linux比较陌生一点儿。但相信&#xff0c;作为程…

如何利用MES管理系统做到车间可视化管理

车间可视化管理是提高生产效率和质量的关键一环。而MES生产管理系统能够为企业提供车间实时数据监控、生产计划管理、异常处理等功能&#xff0c;帮助企业实现车间可视化管理。本文将介绍如何利用MES生产管理系统做到车间可视化管理&#xff0c;包括数据采集、数据分析、实时监…

Error:java: 不再支持源选项 5 请使用 6 或更高版本。

今天电脑重新安装系统&#xff0c;安装jdk环境选择了11版本&#xff0c;但是创建工程时突然报错 报错&#xff1a;Error:java: 不再支持源选项 5 请使用 6 或更高版本 解决方案&#xff1a; 1.查看project setting中的project 和Modules的版本号是否与本机jdk的版本号是否一…

基于单片机快递柜的设计与实现

功能介绍 以51单片机作为主控系统&#xff1b;液晶显示当前信息&#xff0c;最多可存储几十个&#xff1b;按下存储按键液晶显示当前快递柜剩余数量&#xff1b;继电器打开&#xff0c;表示用来放物品&#xff1b;正次按下存储按键将取消存快递&#xff0c;继电器关闭快递柜可用…

Linux 生成加密zip文件

一般在Winodws中对zip或者 rar等压缩包文件加密&#xff0c;都是由第三方软件提供的&#xff0c;大家一般右键选择加密就完事了&#xff0c;那么在Linux中&#xff0c;我们如果也有这个需求怎么来操作呢&#xff1f; 实际上&#xff0c;在Linux中这种需求也是挺多的&#xff0c…

WAIC2023圆满落幕!英码科技品牌备受行业青睐,助推人工智能创新发展

7月6日-8日&#xff0c;在美丽的黄浦江畔——上海隆重举办了2023世界人工智能大会&#xff08;以下简称&#xff1a;WAIC2023&#xff09;&#xff0c;英码携人工智能创新产品和行业解决方案精彩亮相&#xff0c;并与广大同仁展开积极交流&#xff0c;共同探讨人工智能发展新技…

【GeoDa实用技巧100例】002:初始GeoDa软件

文章目录 一、GeoDa简介二、软件界面三、新建保存打开数据源1. 新建数据源2. 保存数据源3. 关闭数据源4. 打开数据源 四、保存打开项目1. 保存项目2.打开项目 一、GeoDa简介 GeoDa是一款免费的开源软件工具&#xff0c;用于空间数据分析。GeoDa旨在通过探索和建模空间模式来促…

图片,截图文字识别——最好用的文字提取工具

这个软件是github上一个开源的软件&#xff0c;非常好用 OCR图片转文字识别软件&#xff0c;完全离线。截屏/批量导入图片&#xff0c;支持多国语言、合并段落、竖排文字。可排除水印区域&#xff0c;提取干净的文本。基于 PaddleOCR 。 下载地址&#xff1a; hiroi-sora/Umi…

vscode maven开发

安装jdk 安装maven 安装vscode 安装vscode插件 Extension Pack for JavaSpring Boot Extension PackLombok Annotations Support for VS CodeLanguage Support for Java™ by Red Hat jdk和maven配置 {"workbench.colorTheme": "One Dark Pro","…

第七章——函数(C++的编程模块)

复习函数的基本知识 要使用C函数&#xff0c;必须完成如下工作&#xff1a; 提供函数定义提供函数原型调用函数 库函数是已经定义和编译好的函数&#xff0c;同时可以使用标准库头文件提供其原型&#xff0c;因此只需要正确地调用这种函数即可。但是创建自己的函数时&#…

直线导轨的基本结构

正常来讲&#xff0c;直线导轨的结构组成比较简单&#xff0c;主要都是由&#xff1a;导轨→滑块→轴承&#xff0c;这3大部分组成&#xff0c;其最突出的特点是具有互换性和自动调心能力&#xff0c;所有方向都有高刚性&#xff0c;以下就来详细的说一下直线导轨的基本结构吧&…

13-Vue长列表优化 vue-virtual-scroller

回答&#xff1a; 在大型的企业级项目中经常要渲染大量的数据&#xff0c;这种长列表是一个很普遍的场景&#xff0c;当列表内容越来越多就会导致页面滑动卡顿、白屏、数据渲染较慢的问题&#xff1b; 这种情况主要发生在小程序、移动端或者后台管理的页面当中&#xff1b; 通常…

K 个一组翻转链表——力扣25

题目描述 方法一&#xff09;模拟 class Solution{ public:pair<ListNode*, ListNode*> myReverse(ListNode* head, ListNode* tail){ListNode* prev tail->next;ListNode* p head;while(prev!tail){ListNode* nex p->next;p->next prev;prev p;p nex; }r…

基于STM32+SHT30设计的环境温度与湿度检测系统(IIC模拟时序)

一、项目功能介绍 当前介绍基于STM32F103ZCT6芯片设计的环境温度与湿度检测系统设计过程。当前系统通过SHT30温湿度传感器采集环境温度和湿度数据&#xff0c;并通过模拟IIC时序协议将数据传输到STM32芯片上。然后&#xff0c;STM32芯片通过处理这些数据并将它们显示在0.91寸O…

微信小程序和微信公众号之前的关系

微信小程序和公众号是相互独立的&#xff0c;是2个不同的东西 在公众号上关联小程序后&#xff0c;可以在公众号的底部菜单栏点击直接进入小程序。2者的用户可以互通&#xff0c;其他就没别的

【C++】STL——string类对象的修改操作、string类对象修改函数的介绍和使用、push_back、append、operator+

文章目录 1.string类对象的修改操作&#xff08;1&#xff09;push_back&#xff08;尾插单个字符&#xff09;&#xff08;2&#xff09;append&#xff08;尾插字符串&#xff09;&#xff08;3&#xff09;operator&#xff08;尾插字符串str&#xff09;&#xff08;4&…