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+Element-ui日历排班自定义实例代码

    Vue+Element-ui日历排班自定义实例代码

    这篇文章主要给大家介绍了关于Vue+Element-ui日历排班自定义的相关资料,有现成的日历插件但是不符合需求,所以项目中使用vue+element的表格组件自己实现一个日历组件,需要的朋友可以参考下
    2023-09-09
  • vue 实现的树形菜的实例代码

    vue 实现的树形菜的实例代码

    这篇文章主要介绍了vue 实现的树形菜单,需要的朋友可以参考下
    2018-03-03
  • vue 使用vue-i18n做全局中英文切换的方法

    vue 使用vue-i18n做全局中英文切换的方法

    这篇文章主要介绍了vue 使用vue-i18n做全局中英文切换的实现方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2018-10-10
  • vue如何给element-ui中的el-tabs动态设置label属性

    vue如何给element-ui中的el-tabs动态设置label属性

    这篇文章主要介绍了vue如何给element-ui中的el-tabs动态设置label属性,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue中的侦听器及使用场景

    Vue中的侦听器及使用场景

    Vue中的侦听器是一种响应式机制,可以对指定的数据进行监听,并在数据变化时执行相应的回调函数。常用于监听复杂数据类型的变化,如对象和数组。通过侦听器,可以实现数据的自动更新和逻辑处理等功能,提高代码的可读性和可维护性
    2023-05-05
  • 父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法

    父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法

    这篇文章主要介绍了父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法,需要的朋友可以参考下
    2018-04-04
  • vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue封装一个简单的div框选时间的组件的方法

    vue封装一个简单的div框选时间的组件的方法

    这篇文章主要介绍了vue封装一个简单的div框选时间的组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue DPlayer详细使用教程含遇到坑

    Vue DPlayer详细使用教程含遇到坑

    Vue-DPlayer是一个易于使用、高性能的基于Vue.js的视频播放器组件,本文给大家介绍Vue DPlayer详细使用,本文将从四个方面对Vue-DPlayer进行详细的阐述,感兴趣的朋友一起看看吧
    2023-10-10
  • Vue 3.0的attribute强制行为理解学习

    Vue 3.0的attribute强制行为理解学习

    这篇文章主要为大家介绍了Vue 3.0的attribute强制行为理解学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论