vue使用npm发布自己的公网包

 更新时间:2023年08月17日 09:25:46   作者:美酒没故事°  
本文主要介绍了vue使用npm发布自己的公网包,通过创建一个简单的npm包,本文详细阐述了从创建到发布的整个过程,具有一定的参考价值,感兴趣的可以了解一下

初始化项目

比如我,创建了code-transfor-text_vue项目

根目录初始化git

git init .

建立开源协议

给项目根目录手动创建LICENSE文件文件,没有后缀名

MIT License
Copyright (c) 2023 quanyi
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

注意吧你的 Copyright (c) 2023 quanyi 改成你的时间和名字

项目基本搭建完毕,开始你的功能开发吧

功能开发中,建立实时本地软链接进行测试

npm link

会在全局包生成个临时的软链接

有了软链接后,在你测试的项目里与软链接达成连接

npm link 包名

然后就是在你测试的项目里import

import CodeTransforText from "code-transfor-text_vue"
Vue.use(CodeTransforText)

使用试试看

测试完毕没问题记得解除你测试项目里的软链接连接

npm unlink 包名

同时存在全局包的软链接记得删除:

一切准备就绪,可以发布了

如果包比较大想要打包一下,使用该步骤

项目根目录创建 webpack.config.js 文件,写入:

const path = require('path');
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'CodeTransforText', // 全局挂载包的引用名
    libraryTarget: 'umd', //通用模式:支持用户通过es、common.js、AMD的方式引入npm包
    globalObject: 'this' // 为 webpack 4 新增属性,需要指定 global 的值为 'this‘,否则会为默认值 'self‘,无法在 nodejs 环境中使用。
  }
}

package.json 文件配置scripts:

"scripts": {
   "build": "webpack"
 },

那么此时给项目执行打包

npm run build

可以得出dist/index.js:

发布到npm

如果没有npm账号就先注册npm账号

有的话就登录

npm login https://www.npmjs.com

发布

npm publish

网络稍有延迟,稍到npm你的账户上看看

使用

那么现在就可以下载了

npm install code-transfor-text_vue

到此这篇关于vue使用npm发布自己的公网包的文章就介绍到这了,更多相关vue npm发布自己包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现骨架屏的示例

    vue实现骨架屏的示例

    这篇文章主要介绍了vue实现骨架屏的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • vue中 $forceUpdate的使用解析

    vue中 $forceUpdate的使用解析

    这篇文章主要介绍了vue中 $forceUpdate的使用解析,该方案是比较好的一种方式,比如说我们尝试直接给某个​​object​​增加一个属性,发现页面上没有效果;直接将length变成0来清空数组,下文详细资料需要的小伙伴可以参考一下
    2022-04-04
  • axios如何取消重复无用的请求详解

    axios如何取消重复无用的请求详解

    这篇文章主要给大家介绍了关于axios如何取消重复无用的请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用axios具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-12-12
  • vuex结合session存储数据解决页面刷新数据丢失问题

    vuex结合session存储数据解决页面刷新数据丢失问题

    在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上。本文使用session存储数据,具有一定的参考价值,感兴趣的可以了解一下
    2021-09-09
  • vue3使用Pinia的store的组件化开发模式详解

    vue3使用Pinia的store的组件化开发模式详解

    这篇文章主要介绍了vue3使用Pinia的store的组件化开发模式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue1.0和vue2.0的watch监听事件写法详解

    vue1.0和vue2.0的watch监听事件写法详解

    今天小编就为大家分享一篇vue1.0和vue2.0的watch监听事件写法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于Vue实现本地消息队列MQ的示例详解

    基于Vue实现本地消息队列MQ的示例详解

    这篇文章为大家详细主要介绍了如何基于Vue实现本地消息队列MQ, 让消息延迟消费或者做缓存,文中的示例代码讲解详细,需要的可以参考一下
    2024-02-02
  • 一文详解Vue中内存泄漏的场景与预防技巧

    一文详解Vue中内存泄漏的场景与预防技巧

    即便是功能强大的 Vue.js 也无法完全避免内存泄漏的问题,内存泄漏不仅会影响应用的性能,还可能导致浏览器崩溃,下面我们来看看Vue 中常见的内存泄漏场景以及如何避免这些问题吧
    2024-12-12
  • uniapp-vue3项目中引入高德地图的具体操作

    uniapp-vue3项目中引入高德地图的具体操作

    这篇文章主要介绍了uniapp-vue3项目中引入高德地图的具体操作,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2025-05-05
  • Vue组件选项props实例详解

    Vue组件选项props实例详解

    父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
    2017-08-08

最新评论