npm发布自己的组件UI包（详细步骤，图文并茂）

news2024/10/5 17:22:44

目前做前端项目，一直采用npm install XXX 的方式去引用别人的组件包，调用方法。 其实在开发中，每个开发者基本都写过单独的组件，如何让自己的组件能够重复的利用，如何让别人也享受到您的成果，这里将一步一步地介绍如何通过npm来发布组件包。

文章目录

    • 1. 新建vue项目
        • 全局安装vue-cli
        • 创建一个vue项目
    • 2. 修改添加文件夹
    • 3. 新建vue.config.js文件
    • 4. 编写组件放置在packages中
        • ① index.js中的写法：
        • ② index.js中的写法
        • ② main.vue中的写法
        • name重点说明：
    • 5. 在examples/main.js引入组件
    • 6. 在页面中引用组件，测试组件是否可用
    • 7. npm打包lib
        • 增加lib命令进入package.json文件
        • npm run lib 编译组件
    • 8. npm发布前的配置
        • 修改package.json文件
        • 创建发布忽略文件.npmignore
    • 9. npm publish发布组件包
        • npm set registry=https://registry.npmjs.org
        • npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz
        • npm login
        • npm publish
    • 10. 发布中遇到的问题及解决
        • 提示：403 Forbidden，...，You do not have permission
        • 提示：... must use TLS 1.2 or higher 错误
        • lib中没有.css文件
    • 11. 项目中引用
        • npm install cuclife
        • main.js中设置
        • 页面中调用

1. 新建vue项目

我们使用cli3初始化一个项目工程：

全局安装vue-cli

npm install -g @vue/cli

创建一个vue项目

vue create cuclife

2. 修改添加文件夹

在这里插入图片描述
这一部分参考了element UI等的结构。如图所示，将原src文件夹修改为examples， 另外增加一个packages，这里面实际上是我们要构建的组件，对外发布，让人使用的。

3. 新建vue.config.js文件

由于src文件被修改，启动vue项目后,找不到入口(main.js)会报错,所以需要重新指定启动入口。代码如下：

module.exports = {
  // 将 examples 目录添加为新的页面
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

4. 编写组件放置在packages中

在这里插入图片描述

① index.js中的写法：

// 导入各个组件
import doAlert from './alert/index'
// 把组件保存到一个数组中
const components = [
    doAlert,
]
// 定义 install 方法
const install = function (Vue) {
    if (install.installed) return
    install.installed = true
    // 遍历组件列表并注册全局组件
    components.map(component => {
        Vue.component(component.name, component) //component.name 此处使用到组件vue文件中的 name 属性
    })
}
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    // 导出的对象必须具备一个 install 方法
    install,
    // 组件列表
    ...components
}

② index.js中的写法

import doAlert from './src/main';
doAlert.install = function(Vue) {
  Vue.component(doAlert.name, dolert);
};
export default doAlert;

② main.vue中的写法

<template>
  <transition name="el-alert-fade">
    <div
      class="alert"
    >
    。。。。。。。
      <div class="el-alert__content">
        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
          <slot name="title">{{ title }}</slot>
        </span>
      </div>
    </div>
  </transition>
</template>

<script type="text/babel">
  const TYPE_CLASSES_MAP = {
    'success': 'el-icon-success',
    'warning': 'el-icon-warning',
    'error': 'el-icon-error'
  };
  export default {
    name: 'doAlert',    //重点部分
    props: {
      title: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'info'
      },
    },

    data() {
      return {
...
      };
    },

    methods: {
    },

    computed: {
      typeClass() {
        return `el-alert--${ this.type }`;
      },

      iconClass() {
        return TYPE_CLASSES_MAP[this.type] || 'el-icon-info';
      },

    }
  };
</script>
<style >
.alert {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  font-size: 30px;
  text-align: center;
  background: #24292e;
  color: white;
}
</style>

name重点说明：

export default下 name 这个名字尤为重要。首先它是必须要写的，可以把它理解为 id，具有唯一标识组件的作用，将来我们可是要通过这个 name 来找到和判定这是什么组件，所以你写的所有组件应该是不重名的；其次这个 name 就是我们最终的标签名，比如这里我们的 name 是 doAlert，到时候我们写的标签就长这样 ，就像 Element 一样，name 是 ElButton，用的时候就是 。

5. 在examples/main.js引入组件

import cuclife from '../packages/index'
Vue.use(cuclife)

6. 在页面中引用组件，测试组件是否可用

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <doAlert
      title="成功提示的文案"
      type="success">
    </doAlert>
  </div>
</template>

<script>

export default {
  name: 'Home',
}
</script>

npm run serve 运行项目,如果没有bug就可以打包发布了

7. npm打包lib

增加lib命令进入package.json文件

在script中加上一句话, “lib”: “vue-cli-service build –target lib –name cuclife –dest lib packages/index.js”

“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”,
“lib”: “vue-cli-service build --target lib --name young-form --dest lib packages/index.js” }

主要需要四个参数：

  • target: 默认为构建应用，改为 lib 即可启用构建库模式
  • name: 输出文件名
  • dest: 输出目录，默认为dist，这里我们改为 lib
  • entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js

npm run lib 编译组件

执行命令 npm run lib ,生成一个lib文件夹，目录结构如下
在这里插入图片描述

8. npm发布前的配置

修改package.json文件

{
	"name": "cuclife",
	"version": "0.1.0",
	"description": "这是一个自定义组件",
	"main": "lib/cuclife.umd.min.js",
	"keyword":"alert",
	"private": false,
	"license": "MIT",
	"author": "cuclife",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
	"lib": "  vue-cli-service build --target lib --name cuclife --dest lib packages/index.js"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "vue-template-compiler": "^2.6.11"
  }
}
  • name: 包名，该名不能和已有的名称冲突
  • version: 版本号，不能和历史版本号相同
  • description: 简介
  • main: 入口文件，应指向编译后的包文件
  • keyword：关键字，以空格分割
  • author：作者
  • private：是否私有，需要修改为 false 才能发布到 npm
  • license：开源协议

创建发布忽略文件.npmignore

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# 本地开发文件
.env.local
.env.*.local

# 日志文件
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# 编辑器文件
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

9. npm publish发布组件包

npm set registry=https://registry.npmjs.org

npm set registry=https://registry.npmjs.org

npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz

npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz

npm login

username：cuclife
password： *******
email：xx@qq.com
OTP一次性授权密码，请参考另外一篇文章 npm 2FA授权的过程

npm publish

在这里插入图片描述

10. 发布中遇到的问题及解决

提示：403 Forbidden，…，You do not have permission

在这里插入图片描述
解决办法： 原先设定的组件为dovue，发现npm中已经存在这个名字了，后来修改为cuclife，顺利完成。

提示：… must use TLS 1.2 or higher 错误

具体的错误信息：npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher
解决办法：
第一步 npm set registry=https://registry.npmjs.org/
第二步 npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz

lib中没有.css文件

开始后，doAlert组件main.vue中没有设置style， npm run lib 后，里面不含有css文件， 后来添加了style样式.alert后， 再次npm run lib 就出现css文件了。

11. 项目中引用

npm install cuclife

main.js中设置

import cuclife from 'cuclife'
Vue.use(cuclife)
import  'cuclife/lib/cuclife.css'

页面中调用

    <doAlert
      title="提醒文案"
      type="success">
    </doAlert>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【KMP算法】

【KMP算法】

KMP算法核心剖析&#xff1a; 关于KMP算法&#xff0c;建议先了解 BF算法 KMP算法是用来解决字符串匹配问题的高级算法&#xff0c;看完这篇文章&#xff0c;你应该能理解KMP算法。 KMP算法和BF算法唯一的区别在于&#xff1a;主串的&#xff49;　并不会回退&#xff0c;子…
阅读更多...
java: “abstract 抽象类” 与 “ interface 接口” 的妙用之道

java: “abstract 抽象类” 与 “ interface 接口” 的妙用之道

java: “abstract 抽象类” 与 “ interface 接口” 的妙用之道 每博一文案 有句很扎心的话&#xff0c;我对这世间唯一的不满就是这世间总是让更懂事的人承受的更多。 生活中&#xff0c;往往你越善解人意&#xff0c;就越没人在乎你的委屈&#xff0c;时间&#xff0c;让你学…
阅读更多...
Linux下使用nginx搭建文件服务器

Linux下使用nginx搭建文件服务器

搭建后访问效果图 安装nginx 1、安装依赖 yum install -y gcc pcre-devel zlib-devel openssl openssl-devel 2、下载nginx mkdir -p /www/nginx cd /www/nginx wget http://nginx.org/download/nginx-1.21.0.tar.gz tar -xvf nginx-1.21.0.tar.gz 3、安装nginx cd nginx…
阅读更多...
redis远程操作常见问题

redis远程操作常见问题

Connection error: Connection refused 出现该错误的原因是未开启远程连接&#xff0c;将本地ip注释掉&#xff1a; Connection error: The remote host closed the connection 出现该错误的原因是&#xff0c;需要关闭安全模式&#xff0c;才可运行其他ip访问&#xff1a; 当…
阅读更多...
websocket简单实现

websocket简单实现

websocket简单实现 websocket是HTML5下一种新的协议&#xff0c;本质上websocket是一个基于tcp的协议。它实现了浏览器与服务器之间的双向通信&#xff0c;能更好的节省服务器资源和宽带并实现实时的通信。 websocket的几个优点? 1、使用的资源少&#xff0c;因为它的头更小。…
阅读更多...
Footprint Analytics 如何帮助区块链研究人员进行数据研究

Footprint Analytics 如何帮助区块链研究人员进行数据研究

管理一个人的数字资产是区块链技术提供的主要应用&#xff0c;但管理的另一面是责任。 就像区块链让任何人都能完全保管他们的加密货币一样&#xff0c;如果你被骗、被黑或被诈骗&#xff0c;几乎没有追索权。链上研究是预防为主&#xff0c;解决问题的方法并不存在。 例如&a…
阅读更多...
个推TechDay治数训练营直播回顾 | 企业级标签体系建设实践

个推TechDay治数训练营直播回顾 | 企业级标签体系建设实践

标签作为当下最普遍的数据资产类型之一&#xff0c;对企业洞察用户画像、开展精细化运营等具有重要的支撑作用。企业标签体系的建设并非一蹴而就的&#xff0c;需要结合业务视角进行整体的规划&#xff0c;更涉及到复杂的数据治理和数据资产管理等工作。 本文对个推TechDay“治…
阅读更多...
复习 [kuangbin带你飞]专题5 并查集

复习 [kuangbin带你飞]专题5 并查集

目录1. poj 2236 Wireless Network2. poj 1611 The Suspects3. hdu 1213 How Many Tables4. hdu 3038 How Many Answers Are Wrong5. poj 1182 食物链6. poj 1417 True Liars7. poj 1456 Supermarket8. poj 1733 Parity game9. poj1984 Navigation Nightmare10. poj 2912 A Bug…
阅读更多...
MYSQL IN EXISTS LEFT JOIN 结果不同的问题？

MYSQL IN EXISTS LEFT JOIN 结果不同的问题？

随着问问题的同学越来越多&#xff0c;公众号内部私信回答问题已经很困难了&#xff0c;所以建立了一个群&#xff0c;关于各种数据库的问题都可以&#xff0c;目前主要是 POSTGRESQL, MYSQL ,MONGODB ,POLARDB ,REDIS 等&#xff0c;期待你的加入&#xff0c;加群请添加微信li…
阅读更多...
智慧园区建设面临挑战，该如何应对？

智慧园区建设面临挑战，该如何应对？

随着全球物联网、移动互联网、云计算等新一轮信息技术的迅速发展和深入应用&#xff0c;“智慧园区”建设已成为发展趋势。近年来&#xff0c;我国的产业园区也向着智慧化、创新化、科技化转变。中国经济正在进入转型升级的关键时期&#xff0c;各地产业竞争态势越发激烈。可以…
阅读更多...
ClickHouse 大数据量的迁移方式

ClickHouse 大数据量的迁移方式

关于Clickhouse 备份方式&#xff0c;其官方网站上就提供了多种备份方式可以参考&#xff0c;不同的业务需求有不同的使用场景&#xff0c;需要使用不同的备份方式&#xff0c;不存在一个通用的解决方案可以应对各种情况下的ClickHouse备份和恢复。今天这个文字&#xff0c;我们…
阅读更多...
Qt+第三方库开发遇到的坑---kalrry

Qt+第三方库开发遇到的坑---kalrry

Qt依赖UG库开发遇到的坑---kalrry一、依赖引入坑二、Qt在Debug时报错1、编译器是 **MSVC** 还是 **MinGW**2、编译器 32位 还是 64位三、QtMSVC编译后中文乱码四、不能将const char*类型的值分配到const* 类型的实体五、debug编译后再发布程序无法运行六、Qt 环境配置提示警告警…
阅读更多...
Spring @Transactional注解事务六大失效场景

Spring @Transactional注解事务六大失效场景

Transactional事务失效场景1&#xff1a;注解在非public修饰的方法上。 原因&#xff1a;Spring强制的要求。 代码示例&#xff1a; Transactionalprivate void createOrder(){} Transactional事务失效场景2&#xff1a;注解在被final关键字修饰的方法上。 原因&#xff1a;Spr…
阅读更多...
推荐一款好用的设备维护管理系统，你用过了吗

推荐一款好用的设备维护管理系统，你用过了吗

设备维护管理系统层出不穷&#xff0c;找到一款好用的适配的&#xff0c;也要花费大量的时间去挑选&#xff01; 对于企业来说&#xff0c;一个好的设备管理系统应该能够&#xff1a; 1. 适应企业高度场景化的设备管理工作&#xff0c;覆盖设备的采购、常规检查、养护、添装、…
阅读更多...
“三刷”牛客网844道Java题目，易错知识点总结，带你清扫Java基础面试障碍

“三刷”牛客网844道Java题目，易错知识点总结，带你清扫Java基础面试障碍

目录 前言 1、子类通过哪些办法&#xff0c;可以调用继承自父类的方法&#xff1f; 2、volatile、Lock、transient 哪个关键字不能用来处理线程安全 3、Hashtable 和 HashMap 的区别是&#xff1f;&#xff08;容易忽略的两点&#xff09; 4、如何声明了一个适合于创建50个字…
阅读更多...
flask框架实现文件下载接口

flask框架实现文件下载接口

方式一&#xff1a; app.route("/download1") def download():# return send_file(test.exe, as_attachmentTrue)return send_file(2.jpg)# return send_file(1.mp3)如果不加as_attachment参数&#xff0c;则会向浏览器发送文件&#xff0c;比如发送一张图片&#x…
阅读更多...
Revit技巧：快速隔离一个小构件，拉伸屋顶转折处连接

Revit技巧：快速隔离一个小构件，拉伸屋顶转折处连接

一、Revit中如何快速单独隔离一个小构件 今天跟大家分享的是一个快速隔离的小技巧&#xff0c;你可以理解为快速用剖面框拉成你需要的构件区域。我就举个例子让大家简单容易理解&#xff0c;如图1所示&#xff0c;假设我只需要编辑那个墙的装饰&#xff0c;但又需要用剖面框&am…
阅读更多...
704二分查找法--搜索区间

704二分查找法--搜索区间

二分查找法–搜索区间的深入理解 二分查找法是算法学习中很基础的算法&#xff0c;但是其也是很重要的算法&#xff0c;将二分查找法搞明白对后续算法的学习有着事半功倍的作用。 本体难点&#xff1a;二分搜索区间的判断 搜索区间 [left,right] int search(vector<int>…
阅读更多...
026_SS_MoFusion A Framework for Denoising-Diffusion-based Motion Synthesis

026_SS_MoFusion A Framework for Denoising-Diffusion-based Motion Synthesis

MoFusion: A Framework for Denoising-Diffusion-based Motion Synthesis 本文提出了一种利用diffusion生成人体motion的方法。这种方法可以将音频和文本作为条件。 损失函数 对于diffusion的损失中&#xff0c;加入了运动损失。 其中第一项 LdaL_{da}Lda​ 是原始的diffusio…
阅读更多...
微信公众号如何接入ChatGPT机器人

微信公众号如何接入ChatGPT机器人

不难&#xff0c;代码总共也就25行&#xff0c;大致逻辑如下。 总共分为是下面两步 文章目录在云服务器上部署自定义消息处理服务微信公众号配置自己的消息处理服务器在云服务器上部署自定义消息处理服务 这里需要我们自定义来处理用户发送过来的消息 首先导入werobot&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023