Vue 组件封装发布 npm 包(2023/03/17)

Vue 组件封装发布 npm 包(2023/03/17)

文章目录

  • Vue 组件封装发布 npm 包(2023/03/17)
    • 1. 前提条件
    • 2. 准备项目
      • 2.1 创建 Vue 项目
      • 2.2 编写组件
      • 2.3 测试组件
      • 2.4 编写打包入口文件
      • 2.5 编写 Readme
    • 3. 打包发布
      • 3.1 非编译方式(推荐)
      • 3.2 编译方式
    • 4. 测试使用

项目中经常遇到需要组件复用的情况,本文将介绍如何将 Vue 组件封装成 npm 包,并上传到 npm 私有仓库(本文不介绍 npm 私有仓库的搭建,请自行查阅相关资料)。

1. 前提条件

  • npm 私有仓库;
  • nodejs;
  • Vue;

2. 准备项目

2.1 创建 Vue 项目

  1. 通过 vue-cli 创建并初始化 vue2 项目;

    $ vue create app
    
  2. 创建src/packages目录用来存放组件,项目整体目录结构如下;

    app
    ├── README.md
    ├── babel.config.js
    ├── jsconfig.json
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   ├── components
    │   ├── packages
    │   └── main.js
    └── vue.config.js
    

2.2 编写组件

此处以简单的 HelloVue 组件为例,新建src/packages/hello-vue/index.vue文件,内容如下:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloVue",
  props: {
    msg: String
  }
}
</script>

<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

2.3 测试组件

src/App.vue中引入HelloVue组件测试能否正常使用,内容如下:

<template>
  <div id="app">
    <hello-vue msg="Hello, Vue!"></hello-vue>
  </div>
</template>

<script>
import HelloVue from "@/packages/hello-vue/index.vue";

export default {
  name: 'App',
  components: {
    HelloVue
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2.4 编写打包入口文件

测试通过后,编写打包入口 js 文件,创建src/index.js文件,内容如下:

import HelloVue from "@/packages/hello-vue/index.vue";

// 需要打包导出的组件
const components = [
    HelloVue
];

const install = function (Vue) {
    components.map(component => {
        Vue.component(component.name, component);
    });
}

if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}

export default {
    name: "HelloVue",
    version: "1.0.0",
    install
};

2.5 编写 Readme

编写Readme.md文件内容,如插件使用方式等等。

3. 打包发布

3.1 非编译方式(推荐)

使用非编译的方式可以解决src/assets文件夹下静态文件依赖的问题,但无法解决public目录静态文件依赖问题(目前还没找到较好的解决办法)。

  1. 修改package.json文件,修改内容如下:

    {
      "name": "@zhy/app", // 包名
      "version": "0.1.0", // 版本号,后续每次更新发布都要修改
      "private": false, // 必须修改为 false
      "description": "Hello Vue!", // 包描述
      "main": "./src/index.js" // 包入口文件
    }
    
  2. 添加.npmignore文件,忽略不需要发布的文件,如配置文件等;

    node_modules/
    
    public/
    
    src/components
    src/App.vue
    src/main.js
    
    .gitignore
    
    babel.config.js
    jsconfig.json
    package-lock.json
    vue.config.js
    
    .idea
    
  3. 登录私有仓库,此处笔者仓库地址为http://172.20.2.5:8081/repository/npm-hosted/

    # 根据提示输入用户名密码登录
    $ npm login --registry http://172.20.2.5:8081/repository/npm-hosted/
    
  4. 发布到私有仓库;

    # 发布
    $ npm publish --registry http://172.20.2.5:8081/repository/npm-hosted/
    
    # 从私有仓库删除(谨慎操作)
    $ npm unpublish -f --registry http://172.20.2.5:8081/repository/npm-hosted/
    

3.2 编译方式

编译的方式可以对代码进行编译压缩,隐藏源码,但无法解决静态文件依赖的问题。

  1. 修改package.json文件,修改内容如下:

    {
      "name": "@zhy/app", // 包名
      "version": "0.1.0", // 版本号,后续每次更新发布都要修改
      "private": false, // 必须修改为 false
      "description": "Hello Vue!", // 包描述
      "main": "./app/app.umd.js", // 包入口文件,对应打包后的目录
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        // 新增打包脚本,--name 打包后的名字,--dest 打包后的目录
        "package": "vue-cli-service build --target lib src/index.js --name app --dest app"
      }
    }
    
  2. 打包编译;

    # 成功后生成打包目录 app
    $ npm run package
    
  3. 添加.npmignore文件,忽略不需要发布的文件,如配置文件等;

    node_modules/
    
    public/
    src/
    
    .gitignore
    .npmignore
    
    babel.config.js
    jsconfig.json
    package-lock.json
    vue.config.js
    
    .idea
    
  4. 登录私有仓库,此处笔者仓库地址为http://172.20.2.5:8081/repository/npm-hosted/

    # 根据提示输入用户名密码登录
    $ npm login --registry http://172.20.2.5:8081/repository/npm-hosted/
    
  5. 发布到私有仓库;

    # 发布
    $ npm publish --registry http://172.20.2.5:8081/repository/npm-hosted/
    
    # 从私有仓库删除(谨慎操作)
    $ npm unpublish -f --registry http://172.20.2.5:8081/repository/npm-hosted/
    

4. 测试使用

  1. 创建并初始化 Vue 项目;

    $ vue create test-app
    
  2. 安装依赖;

    $ npm install @zhy/app --registry http://172.20.2.5:8081/repository/npm-hosted/
    
  3. src/main.js文件中注册插件;

    import HelloVue from '@zhy/app';
    
    Vue.use(HelloVue);
    
  4. App.vue中使用插件;

    <template>
      <div id="app">
        <hello-vue msg="Hello Vue!"></hello-vue>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      components: {
      }
    }
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

参考资料:

  • Vue封装组件并发布到npm仓库 - 掘金 (juejin.cn)
  • 封装Vue组件并发布到npm(完美解决组件中的静态文件引用) - 浅笑· - 博客园 (cnblogs.com)
  • Vue封装组件并发布到npm仓库-阿里云开发者社区 (aliyun.com)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python直接复制已有的venv虚拟环境以创建新的虚拟环境

Python venv创建的虚拟环境复制到其他路径&#xff0c;如何断开与原始虚拟环境的连接&#xff0c;成为一个全新的虚拟环境&#xff0c;且两个虚拟环境之间的更新互不影响&#xff1f;1.软件环境⚙️2.问题描述&#x1f50d;3.解决方法&#x1f421;3.1.方法1&#xff1a;先复制…

用Python Flask为女朋友做一个简单的网站(附可运行的源码)

&#x1f31f;所属专栏&#xff1a;献给榕榕&#x1f414;作者简介&#xff1a;rchjr——五带信管菜只因一枚&#x1f62e;前言&#xff1a;该专栏系为女友准备的&#xff0c;里面会不定时发一些讨好她的技术作品&#xff0c;感兴趣的小伙伴可以关注一下~&#x1f449;文章简介…

什么是PCB走线的3W原则

在设计PCB的时候我们会经常说到3W原则&#xff0c; 它指的是两个PCB走线它们的中心间距不小于3倍线宽&#xff0c;这个W就是PCB走线的宽度。这样做的目的主要是为了减小走线1和走线2之间的串扰&#xff0c;一般对于时钟信号&#xff0c;复位信号等一些关键信号需要遵循3W原则。…

Vue插槽理解

Vue插槽理解插槽插槽 slot又名插槽&#xff0c;vue内容分发机制&#xff0c;组件内部的模板引擎使用slot元素作为承载分发内容的出口 插槽slot是子组件的一个模板标签元素&#xff0c;而这一个元素是否显示&#xff0c;以及怎么显示是由父组件决定的 slot分为三类&#xff1a;默…

链表带环问题(详解)

&#x1f506;链表带环问题&#xff08;详解&#xff09;&#x1f506;I 给定一个链表&#xff0c;判断链表中是否有环。&#x1f506;II 给定一个链表&#xff0c;返回链表开始入环的第一个结点。 如果链表无环&#xff0c;则返回 NULL。&#x1f506;复制带随机指针的链表&am…

集成方法!

目录 关注降低variance,选择bias较小的基学习器 Bagging Stacking Random Forest 关注降低bias,选择variance较小的基学习器 Adaboost Boosting 关注降低variance,选择bias较小的基学习器 Bagging 给定m个样本的数据集&#xff0c;利用有放回的随机采样法&#xff0c;得…

【Linux】操作系统(Operator System)

操作系统&#xff08;Operator System &#xff09;一、操作系统的概念二、操作系统的作用三、系统调用和库函数一、操作系统的概念 操作系统是一组控制和管理计算机软硬件资源&#xff0c;为用户提供便捷使用的计算机程序的集合&#xff0c;是配置在计算机硬件系统上的第一层…

模拟实现字符串有关函数(详细讲解)

在编写程序时&#xff0c;我们都喜欢写出简便并且效率高的代码&#xff0c;那么此时库函数中的有些函数就是我们的不二之选&#xff0c;那么&#xff0c;大家汇米你实现吗&#xff1f;下面就先从我们最简单的字符串函数说起&#xff1a; 1.strlen 这个是函数的格式&#xff0c…

做了个springboot接口参数解密的工具,我给它命名为万能钥匙(已上传maven中央仓库,附详细使用说明)

前言&#xff1a;之前工作中做过两个功能&#xff0c;就是之前写的这两篇博客&#xff0c;最近几天有个想法&#xff0c;给它做成一个springboot的start启动器&#xff0c;直接引入依赖&#xff0c;写好配置就能用了 springboot使用自定义注解实现接口参数解密&#xff0c;普通…

SpringSecurity学习(七)授权

授权 什么是权限管理 权限管理核心概念 SpringSecurity权限管理策略 基于URL地址的权限管理 基于方法的权限管理 一、权限管理 二、授权核心概念 在认证的过程成功之后会将当前用户登录信息保存到Authentication对象中&#xff0c;Authentication对象中有一个getAuthorities…

ChatGPT-4震撼发布

3月15日消息&#xff0c;美国当地时间周二&#xff0c;人工智能研究公司OpenAI发布了其下一代大型语言模型GPT-4&#xff0c;这是其支持ChatGPT和新必应等应用程序的最新AI大型语言模型。该公司表示&#xff0c;该模型在许多专业测试中的表现超出了“人类水平”。GPT-4, 相较于…

基于Java+Springboot+vue高校资源共享交流平台设计和实现

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

SpringBoot介绍。

目录 一、SpringBoot简介 1、SpringBoot开发步骤 2、官网构建工程 3、SpringBoot概述 二、配置文件 1、配置文件格式 2、yaml格式 3、yaml配置文件数据读取 三、多环境配置 1、yam文件 2、properties文件 3、命令行启动参数设置 四、SpringBoot整合 1、SpringBo…

界面开发(4)--- PyQt5实现打开图像及视频播放功能

PyQt5创建打开图像及播放视频页面 上篇文章主要介绍了如何实现登录界面的账号密码注册及登录功能&#xff0c;还简单介绍了有关数据库的连接方法。这篇文章我们介绍一下如何在设计的页面中打开本地的图像&#xff0c;以及实现视频播放功能。 实现打开图像功能 为了便于记录实…

OCPC系列 - OCPC介绍扫盲贴来啦

本文对oCPC做个介绍&#xff0c;它是一种智能投放模式&#xff0c;系统通过对广告主转化数据的对接和深度理解&#xff0c;实时预估每一次点击的转化率并基于竞争环境智能出价&#xff0c;通过强化高转化率曝光机会的获取&#xff0c;弱化低转化率曝光机会的展现&#xff0c;以…

力扣-进店却未进行过交易的顾客

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;1581. 进店却未进行过交易的顾客二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行…

文心一言正式对标GPT-4,是青铜还是王者?

昨天&#xff0c;OpenAI正式发布GPT-4模型 号称史上最先进的AI系统 今天&#xff0c;百度文心一言在万众瞩目中闪亮登场 这款产品被视为中国版ChatGPT 在这一个多月内备受关注 文心一言某种程度上具有了对人类意图的理解能力 回答的准确性、逻辑性、流畅性都逐渐接近人类…

Go 微服务开发框架 DMicro 的设计思路

Go 微服务开发框架 DMicro 的设计思路 DMicro 源码地址: Gitee:dmicro: dmicro是一个高效、可扩展且简单易用的微服务框架。包含drpc,dserver等 背景 DMicro 诞生的背景&#xff0c;是因为我写了 10 来年的 PHP&#xff0c;想在公司内部推广 Go, 公司内部的组件及 rpc 协议都…

多模态特征融合:图像、语音、文本如何转为特征向量并进行分类

多模态特征融合前言输入层&#xff0c;数据集转为特征向量图像语音什么是时域信号&#xff0c;什么是频域信号语音信号转换 - 1.傅立叶变换语音信号转换 - 2.梅尔频率倒谱系数文本词袋模型词嵌入模型输出层&#xff0c;多模态模型合并前言 学习多模态的话题可以从深度学习的分…

【YOLOv8/YOLOv7/YOLOv5/YOLOv4/Faster-rcnn系列算法改进NO.57】引入可形变卷积

文章目录前言一、解决问题二、基本原理三、​添加方法四、总结前言 作为当前先进的深度学习目标检测算法YOLOv8&#xff0c;已经集合了大量的trick&#xff0c;但是还是有提高和改进的空间&#xff0c;针对具体应用场景下的检测难点&#xff0c;可以不同的改进方法。此后的系列…
最新文章