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前端测试开发watch监听data的数据变化

    vue前端测试开发watch监听data的数据变化

    这篇文章主要为大家介绍了vue测试开发watch监听data的数据变化,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • 详解vue 模拟后台数据(加载本地json文件)调试

    详解vue 模拟后台数据(加载本地json文件)调试

    本篇文章主要介绍了详解vue 模拟后台数据(加载本地json文件)调试,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • vue3结合ts从零实现vueuse的useRouteQuery方法

    vue3结合ts从零实现vueuse的useRouteQuery方法

    这篇文章主要为大家详细介绍了如何使用vue3与ts从零实现一个类vueuse的useRouteQuery方法,并解决vueuse的useRouteQuery方法存在的一些问题,感兴趣的可以了解下
    2024-03-03
  • nuxt3中server routes的使用详解

    nuxt3中server routes的使用详解

    本文主要介绍了nuxt3中server routes的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue插件从封装到发布的完整步骤记录

    Vue插件从封装到发布的完整步骤记录

    这篇文章主要给大家介绍了关于Vue插件从封装到发布的完整步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • vue3+elementPlus项目支持设置默认附件方式

    vue3+elementPlus项目支持设置默认附件方式

    这篇文章主要介绍了vue3+elementPlus项目支持设置默认附件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 如何在vue中使用ant-design-vue组件

    如何在vue中使用ant-design-vue组件

    这篇文章主要介绍了如何在vue中使用ant-design-vue组件,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • Vue el-table表格第一列序号与复选框hover切换方式

    Vue el-table表格第一列序号与复选框hover切换方式

    这篇文章主要介绍了Vue el-table表格第一列序号与复选框hover切换方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue3 Watch踩坑实战之watch监听无效

    Vue3 Watch踩坑实战之watch监听无效

    Vue.js中的watch选项用于监听Vue实例上某个特定的数据变化,下面这篇文章主要给大家介绍了关于Vue3 Watch踩坑实战之watch监听无效的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 使用echarts柱状图实现select下拉刷新数据

    使用echarts柱状图实现select下拉刷新数据

    这篇文章主要介绍了使用echarts柱状图实现select下拉刷新数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论