自己开发组件更新到npm网站上 通过npm install 安装 保姆级别教程

文章目的

在项目开发中，经常通过npm install安装使用各种各样的npn包。本文记录如何自己实现的一个npm包

1. 环境准备

开发环境安装好,没有准备好环境 需要先安装哦

在这里插入图片描述

2. 创建Vue项目

初始化Vue项目：vue create xwdm-test

在这里插入图片描述

选择手动选择功能 Manually select features,选择好了回车下一步

在这里插入图片描述

这里(*)代表选中的, 点一下空格键就可以取消和选中,键盘的上下按钮就可以实现上下切换,根据自己需要自行选择 这里我取消Linter / Fromatter ,选择了CSS Pre-processors ,选择好了回车下一步

在这里插入图片描述

我选择的是vue2版本的

在这里插入图片描述

默认回车,下一步

在这里插入图片描述

选择 In package.json ,回车下一步

在这里插入图片描述

这个是问你要不要把(xwdm-test)创建模板 方便你下次创建项目使用 咱们选择y 回车下一步 然后在下一步等待安装吧

在这里插入图片描述
在这里插入图片描述

这样就是创建成功了

在这里插入图片描述
在这里插入图片描述

项目文件结构如下图

我用的开发工具是WebStorm你们可以用vscode 推荐vscode

在这里插入图片描述

我们执行一下npm install 然后把他运行起来 npm run serve

在这里插入图片描述

在这里插入图片描述

运行起来的效果 看到这个页面 说明我们的项目创建完成

在这里插入图片描述

3. 项目重构

把src文件更改一下名称examples

在这里插入图片描述

把src文件里的assets和components这俩文件删掉, 然后把App.vue 里面的文件修改一下,把没用的处理一下

在这里插入图片描述

main.js 里面的文件修改一下,把没用的处理一下

在这里插入图片描述

main.js 里面的代码如下

import Vue from 'vue'
import App from './App.vue'
const files = require.context('../packages/', false, /\.vue$/);
files.keys().forEach(key => {
  // 组件名
  const name =files(key).default.name
  // 注册组件
  Vue.component(name, files(key).default)
});

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

创建packages空的文件,packages在根目录下和package.json平级

在这里插入图片描述

在packages空文件里创建index.js文件代码如下

在这里插入图片描述

下面是index.js代码复制一下就可以用

import Vue from "vue";
const files = require.context('./', false, /\.vue$/);
// 定义install方法
const install = function (Vue) {
    files.keys().forEach(key => {
        // 组件名
        const name =files(key).default.name
        // 注册组件
        Vue.component(name, files(key).default)
    });
}
// 判断是否直接引入文件，如果是，就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    install
}

在创建xwButton.vue文件这个就是我们自己封装的组件后期通过npm install 就可以引入使用了

在这里插入图片描述

xwButton.vue 文件代码如下,文件名称和name的属性保持一致

<template>
  <div class="test">
    一只敲码的猫~
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json 文件，图片文件等等）
export default {
  name: "xwButton",
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      btn: 0,
    }
  },
  methods: {}
}
</script>

<style scoped>
.test {
  font-size: 50px;
  color: aqua;
}
</style>

App.vue里面引入 xwButton,xwButton属于全局注册的我们就可以直接引入, 引入名称和文件名称保持一致

在这里插入图片描述

修改vue.config.js

在这里插入图片描述
在这里插入图片描述

vue.config.js代码如下

const {defineConfig} = require('@vue/cli-service')
const webpack = require("webpack");
const path = require('path')
module.exports = defineConfig({
    transpileDependencies: true,
    productionSourceMap: false,
    pages: {
        index: {
            // 修改项目入口文件
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    },
    chainWebpack: config => {
        config.module
            .rule('js')
            .include.add(path.resolve(__dirname, 'packages')).end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                return options
            })
    }
})

运行 npm run serve,如果能看到下面的样式, 说明您的项目搭建基本就可以用了

在这里插入图片描述

修改package.json配置
在这里插入图片描述

 "build": "vue-cli-service build --target lib ./packages/index.js --name xwdmUI --dest xwdmUI"
  • –target lib 关键字 指定打包的目录
  • –name 打包后的文件名字
  • –dest 打包后的文件夹的名称

main是入口文件

 "main": "xwdmUI/xwdmUI.umd.js",

执行 npm run build 后项目目录里会多一个文件(xwdmUI)如下图所示:

在这里插入图片描述

4. 代码发布

  1. 注册账户
    先去npm官方网站注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

  2. 设置npm源
    可能本地的npm镜像源采用的是淘宝镜像源或者其它的，如果想要发布npm包，我们得吧我们得npm源切换为官方得源，命令如下： npm config set registry=https://registry.npmjs.org

  3. 添加npm用户
    进入已打包好的目录，添加npm用户，执行命令：npm adduser
    这里会让你填写用户名等等，如果之前设置过即可跳过此步。
    在这里插入图片描述

  4. 发布npm
    首先我们要执行打包命令,(xwdomUI是打包文件)
    在这里插入图片描述
    在项目目录下执行命令：npm publish
    如果发布失败可能是名字重复了，改了名字即可，发布成功后，我们即可到npm光网上查看自己发布得npm包：
    在这里插入图片描述

npm官网上我们发布的包

在这里插入图片描述
5. 更新npm包
每个npm包的版本号都是唯一的，我们每次更新npm包后，都是需要更新版本号，否则会报错提醒：
在这里插入图片描述
再执行发布npm publish

在这里插入图片描述

更新后npm仓库里版本也跟着更新了这时说明我我们代码库更新成功了

在这里插入图片描述

总体说来Vue组件封装发布到npm仓库整体难度不大，主要是理解Vue的install方法以及打包相关知识，其实最重要的还是如何封装一个适用范围广，扩展性高的公用组件。

5. 安装使用

进入官网查看我们的代码库,在我们项目中执行npm i xwdm-test(使用方式和elementUI一样的)

在这里插入图片描述

安装成功后package.json文件会多一个我们开发代码库

在这里插入图片描述

在项目里使用方法和elementUI引入方法是一样的

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

本次分享结束,欢迎一起讨论指导 哈哈 ^_^

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

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

相关文章

蓝桥杯day04——查询后矩阵的和

蓝桥杯day04——查询后矩阵的和

1.题目 给你一个整数 n 和一个下标从 0 开始的 二维数组 queries &#xff0c;其中 queries[i] [typei, indexi, vali] 。 一开始&#xff0c;给你一个下标从 0 开始的 n x n 矩阵&#xff0c;所有元素均为 0 。每一个查询&#xff0c;你需要执行以下操作之一&#xff1a; …
阅读更多...
java类库的废弃API

java类库的废弃API

java语言一直在进化&#xff0c;java类库也越来越庞大&#xff0c;给人的感觉是一直在做加法。 有没有做减法呢&#xff1f;当然也有&#xff0c;一些是设计失误需要撤回的&#xff0c;如可能引起线程安全问题的Thread.stop()等方法&#xff1b;还有是随着时代发展而被淘汰的&…
阅读更多...
《微信小程序开发从入门到实战》学习三十八

《微信小程序开发从入门到实战》学习三十八

4.2 云开发JSON数据库 4.2.9 条件查询与查询指令 在查询数据时&#xff0c;有时需要对查找的数据添加一些限定条件&#xff0c;只获取满足给定条件的数据&#xff0c;这样的查询称为条件查询。 可以在集合引用上使用where方法指定查询条件&#xff0c;再用get方法&#xff0…
阅读更多...
springCache——jetcache缓存

springCache——jetcache缓存

文章目录 jetcache远程、本地缓存方案jetcache方法注解使用方式 jetcache远程、本地缓存方案 <dependency><groupId>com.alicp.jetcache</groupId><artifactId>jetcache-starter-redis</artifactId><version>2.6.4</version></de…
阅读更多...
SpringBootCache缓存——j2cache

SpringBootCache缓存——j2cache

文章目录 缓存供应商变更&#xff1a;j2cache 缓存供应商变更&#xff1a;j2cache <!-- https://mvnrepository.com/artifact/net.oschina.j2cache/j2cache-core --><dependency><groupId>net.oschina.j2cache</groupId><artifactId>j2cache-cor…
阅读更多...
Linux部分基础指令讲解

Linux部分基础指令讲解

目录 1.echo指令 2.more指令 3.less指令&#xff08;重要&#xff09; 4.head指令 5.tail指令 6.管道| 7.时间相关的指令 8.cal指令 9.find指令 10.grep指令 1.echo指令 我们先看效果 如图所示我们可以看到显示器显示出了hellow world和hellow这两句话&#xff0c;我们的echo的…
阅读更多...
（详细教程）笔记本电脑安装Ubuntu系统

（详细教程）笔记本电脑安装Ubuntu系统

1.前言 老的小米笔记本淘汰了&#xff0c;装一下linux系统玩一下。 使用工具如下&#xff1a;一台小米笔记本pro15.6一个惠普32G U盘一个台式机用于下载镜像等资源 2.下载Ubuntu桌面版 cn.ubuntu.com/download/de… 这里我下载的是 22.04.3 LTS 3.下载烧录工具&#xff0c…
阅读更多...
定时任务特辑 | Quartz、xxl-job、elastic-job、Cron四个定时任务框架对比，和Spring Boot集成实战

定时任务特辑 | Quartz、xxl-job、elastic-job、Cron四个定时任务框架对比，和Spring Boot集成实战

专栏集锦&#xff0c;大佬们可以收藏以备不时之需&#xff1a; Spring Cloud 专栏&#xff1a;http://t.csdnimg.cn/WDmJ9 Python 专栏&#xff1a;http://t.csdnimg.cn/hMwPR Redis 专栏&#xff1a;http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏&#xff1a;http://t.csdni…
阅读更多...
提升Jmeter测试效率的9种参数化方法！

提升Jmeter测试效率的9种参数化方法！

jmeter工具无论做接口测试还是性能测试&#xff0c;参数化都是一个必须掌握且非常有用的知识点。参数化的使用场景: 1&#xff09;多个请求都是同一个ip地址&#xff0c;若服务器地址更换了&#xff0c;则脚本需要更改每个请求的ip 2&#xff09;注册账号&#xff0c;不允许账…
阅读更多...
探索未来能源：可控核聚变的挑战与希望

探索未来能源：可控核聚变的挑战与希望

探索未来能源：可控核聚变的挑战与希望 引言 随着人类社会的不断发展，对能源的需求也在持续增长。传统的化石燃料能源在燃烧过程中会产生大量的二氧化碳和其他温室气体，导致全球气候变暖，对环境产生了重大威胁。因此，寻找一种清洁、可持续、高效的能源成为了当务之急。在…
阅读更多...
linux学习资源

linux学习资源

linux书籍资源&#xff08;pdf版&#xff09;&#xff1a; 有需要的请在评论区留言。 《Linux Basics for Hackers》 kaiwan的三部曲&#xff1a; 《Hands-On System Programming with Linux》 《Linux Kernel Programming》 《Linux Kernel Programming Part 2》 《Ma…
阅读更多...
C#中GDI+图形图像绘制(直线、矩形、圆、椭圆、圆弧、扇形、多边形）

C#中GDI+图形图像绘制(直线、矩形、圆、椭圆、圆弧、扇形、多边形）

目录 一、直线 二、矩形 三、椭圆 四、圆 五、圆弧 六、扇形 七、多边形 八、示例源码 一、直线 调用Graphics类中的DrawLine()方法&#xff0c;结合Pen对象可以绘制直线。DrawLine()方法有以下两种构造函数。 第一种用于绘制一条连接两个Point结构的线。当参数pt1的值…
阅读更多...
你的身份信息是否被冒用，办了电话卡却毫不知情？

你的身份信息是否被冒用，办了电话卡却毫不知情？

近日&#xff0c;公安部发布电信网络诈骗及其关联违法犯罪联合惩戒办法&#xff0c;向社会公开征求意见。 在征求意见稿中&#xff0c;非法买卖、出租、出借电话卡三张以上&#xff0c;假冒他人身份或者虚构代理关系开立电话卡等行为被列入惩戒。 为了防止自身利益受到侵害&a…
阅读更多...
Chrome 拓展开发系列：什么是 Chrome 拓展？

Chrome 拓展开发系列：什么是 Chrome 拓展？

文章目录 Chrome 拓展&#xff08;Chrome Extension&#xff09;是什么为什么使用 Chrome 拓展&#xff1f;个性化浏览体验提高工作效率改善隐私和安全创新新功能 发展历史2009 年&#xff1a;初版发布2010 年&#xff1a;稳步增长2013 年&#xff1a;Chrome App 和扩展合并201…
阅读更多...
【计算机网络漫谈】OSI七层模型与TCP/IP四层（参考）模型

【计算机网络漫谈】OSI七层模型与TCP/IP四层（参考）模型

一、七层&#xff1f;四层&#xff1f; 1.为什么需要协议&#xff1f;2.OSI七层模型是干什么的&#xff1f;3.TCP/IP四层&#xff08;参考&#xff09;模型4.TCP/IP&#xff08;参考&#xff09;模型与OSI七层模型有什么异同&#xff1f; 二、自底向上的网络分层 1. 物理层2…
阅读更多...
6.7 Windows驱动开发：内核枚举LoadImage映像回调

6.7 Windows驱动开发：内核枚举LoadImage映像回调

在笔者之前的文章《内核特征码搜索函数封装》中我们封装实现了特征码定位功能&#xff0c;本章将继续使用该功能&#xff0c;本次我们需要枚举内核LoadImage映像回调&#xff0c;在Win64环境下我们可以设置一个LoadImage映像加载通告回调&#xff0c;当有新驱动或者DLL被加载时…
阅读更多...
光伏测算工具能测量哪些数据？

光伏测算工具能测量哪些数据？

光伏测算工具在光伏电站的设计和规划过程中起着至关重要的作用。它们可以测量并分析一系列关键数据&#xff0c;以确保光伏电站的顺利建设和高效运营。本文将详细介绍光伏测算工具能测量的主要数据。 一、太阳能资源评估 光伏测算工具可以对场地的太阳能资源进行评估。这包括测…
阅读更多...
C++模版

C++模版

文章目录 C模版1、泛型编程2、函数模版2.1、函数模版概念2.2、函数模版格式2.3、函数模版原理2.4、函数模版的实例化2.5、模板参数的匹配原则 3、类模版3.1、类模版概念3.2、类模版格式3.3、类模板的实例化 C模版 1、泛型编程 泛型编程&#xff08;Generic Programming&#x…
阅读更多...
html个人简历网页版源码

html个人简历网页版源码

文章目录 1.个人简历1.1 简历风格1 - 纯净版1.2 简历风格2 - 蓝色版1.2 简历风格3 - 粉色心动版 源码目录结构源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134752070 html个人简历网页版源码&#xff0c;好看…
阅读更多...
SpringBoot整合JavaMail

SpringBoot整合JavaMail

SpringBoot整合JavaMail发一个简单邮件 文章目录 SpringBoot整合JavaMail发一个简单邮件导入坐标配置写客户端 SpringBoot整合JavaMail发多部件邮件 导入坐标 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starte…
阅读更多...
最新文章

Copyright @ 2022~2023