将vue项目变成可发布的npm包项目

已于 2023-09-13 16:25:13 修改
阅读量681 收藏
点赞数
文章标签： vue.js npm 前端
于 2023-09-13 15:35:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/samll_redhat/article/details/132855220
版权
本文指导如何使用VueCLI将组件发布为可重用的库，步骤包括创建index.ts和index.js文件，修改package.json配置并添加构建命令以指定输出目标为库。
摘要由CSDN通过智能技术生成

第一步： 在main.ts 文件的平级上新建一个index.ts文件 ，文件中导出你想发布的组件

第二步： 在package.json文件的平级上新建index.js文件 

第三步： 修改package.json文件，新增命令     "buildnpm": "vue-cli-service build --target lib --name preview src/index.ts"

small_redhat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于vue项目打包发布
weixin_51857721的博客
04-07 186
关于vue项目打包发布 方法1： (此方法参考于这位大佬的文章 方法一） ①在项目文件下运行npm run build生成文件夹dist； ②此时，打开dist目录下的index.html文件会发现不仅一片空白，而且还在控制台里报很多错； ③到项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”即可； ④打开dist目录下的index.html，此时页面正常显示 方法2： (此方法搬运于这位大佬的文章 方法二) ①在项目
发布npm包详细步骤以及常见问题解决（基于Vue）
蓝_蓝的博客
11-05 4439
具体步骤如下： 1、安装nodeJS 在node官网下载安装文件，本地安装后对应的npm也会被一同安装 安装完成后命令行执行以下命令查看安装版本 node -v npm -v 2、注册账号 npm和github应该是合作了，部分账号信息可以同步 2.1 注册github账号 github注册 新建项目并clone到本地 2.2 注册npm账号 在npm官网注册账号，登陆后点击发送验证邮件完成账户验证 也可以直接在本地命令...
将vue组件发布成npm包
Yu_Jian_Qt的博客
01-24 2098
将vue组件发布成npm包
手把手教你发布一个npm包（基于vue）
white-hang的博客
12-07 2644
本文，主要介绍了如何基于vue发布一个属于自己的npm包，文章手把手教你实现发布npm包，按步骤操作即可。
用vue写一个npm包(package)，发布及引用
weixin_44434938的博客
02-20 2889
用vue写一个npm包(package)，发布及引用
封装vue插件并发布到npm详细步骤
温情
11-20 2515
平常使用Vue开发时，一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件，但是如果项目不同我们也需要这个组件，那就需要复制一份公共组件代码到新项目，一个还好，如果是多个组件，这样就稍显麻烦了。所以我们可以将封装好的组件打包发布至npm，就可以像element ui这些ui组件库一样通过npm命令下载使用了。
封装vue公共组件，并发布npm平台，让所有人都可以下载使用
weixin_42100033的博客
10-08 1163
封装vue公共组件，并发布npm平台，别人就可以通过命令安装的你的插件来使用
解决vue+elementui项目打包后样式变化问题
11-19
博主刚刚解决了index.html空白问题，刚打开项目页面又发现了样式出现了大问题，样式与开发版本有很大不同，...// The Vue build version to load with the `import` command // (runtime-only or standalone) has bee
mpvue将vue项目转换为小程序
10-17
它允许开发者使用Vue.js的开发体验来构建小程序，同时支持npm包管理器和webpack构建机制，使得项目具有高度的可定制性和扩展性。mpvue旨在实现一套代码多端运行的目标，包括但不限于WEB、微信小程序、支付宝小程序...
详解如何制作并发布一个vue的组件的npm包
01-21
因为本文主要是讲如何把一个vue组件做成npm包并发布。 分为2大步骤： 一.按照相应格式写我们的vue代码（就如同写一个jquery插件时、有其固定的格式一样）。 二.发布到npm上的流程 一、书写一个vue组件 不用脚手架，...
Vue项目打包压缩的实现(让页面更快响应)
10-15
然而，大型Vue项目可能会因为代码量庞大而导致页面加载缓慢。为了解决这一问题，可以采用路由懒加载和gzip压缩技术来优化Vue项目的打包过程，从而加快页面的响应速度。 首先，要了解影响页面响应速度的几个常见因素...
vue3空项目包，自己使用
05-29
- `node_modules`：项目依赖的npm包，包含了Vue3及其相关插件的源码。 - `src`目录：项目的主要代码存放地，可能有`main.js`作为入口文件，`App.vue`作为主组件，以及其他的组件、路由、样式等。 - `.gitignore`：...
详细介绍 Vue3 的 watch 和 watchEffect
weixin_52648900的博客
08-15 962
非常详细介绍了vue3的watch和watchEffect区别和联系
Element-04.组件-Dialog对话框
程小白的博客
08-16 282
【代码】Element-04.组件-Dialog对话框。
element table 判断当前行是否展开和只展开一行
m0_68716504的博客
08-15 438
element组件提供了table的展开和收起功能，并提供了expand-change事件用来监听table行的展开和收起在一些特殊情况下如：处理异步数据时，希望展开行时请求接口，关闭行时不用请求，但是expand-change，无论是展开还是收起都会触发，于是就希望能有一个类似isExpended布尔类型的状态属性来判断是否调用接口。
Vue 生命周期详解含demo、面试常问问题案例
qq_34419312的博客
08-16 1109
Vue 生命周期详解、面试常问问题案例 含 demo
【前端】VUE动态引入组件 通过字符串动态渲染模板 动态生成组件
最新发布
我是Superman丶的博客
08-19 61
【前端】VUE动态引入组件 通过字符串动态渲染模板。
【vue3】组件通信
aaaa_aaab的博客
08-19 444
1. 概述：自定义事件常用于：**子 => 父。**2. 注意区分好：原生事件、自定义事件。● 原生事件：● 事件名是特定的（ click 、 mosueenter 等等）● 事件对象 $event : 是包含事件相关信息的对象（ pageX 、 pageY 、 target 、 keyCode ）● 自定义事件：● 事件名是任意名称● 事件对象 $event : 是调用 emit 时所提供的数据，可以是任意类型！！！--在父组件中，给子组件绑定自定义事件：-->
uniApp如何将vue项目变为小程序
07-08
要将Vue项目转换为小程序，可以使用uni-app框架。uni-app是一个基于Vue.js的跨平台开发框架，可以将Vue项目一键转换为微信小程序、支付宝小程序、百度小程序、字节跳动小程序等多个平台的应用。 下面是将Vue项目转换为小程序的步骤： 1. 安装uni-app：首先，确保已经安装了Node.js和Vue CLI。然后通过以下命令全局安装uni-app： ``` npm install -g @vue/cli @vue/cli-service-global npm install -g @dcloudio/uni-cli ``` 2. 创建uni-app项目：使用以下命令创建一个新的uni-app项目： ``` vue create -p dcloudio/uni-preset-vue my-project ``` 3. 构建项目：进入项目目录，并使用以下命令构建项目： ``` cd my-project npm run dev:mp-weixin ``` 4. 导入小程序开发工具：使用微信开发者工具导入构建好的项目。打开微信开发者工具，点击导入项目，并选择项目根目录下的`dist/dev/mp-weixin`文件夹。 5. 配置小程序：在微信开发者工具中进行小程序的配置，如小程序的AppID等信息。 6. 运行小程序：配置完成后，即可在微信开发者工具中运行和调试小程序。 通过以上步骤，你可以将Vue项目转换为微信小程序。同样的，你也可以使用uni-app将Vue项目转换为其他小程序平台的应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值