雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

教你在npm上发布自己的vue组件

2022-07-04 分类:前端之旅 阅读(1543) 评论(0)

以前做过几次组件, 但是今天想到要再发布一个小组件的时候,居然一下子想不起来了,简单做个记录吧

首先 本地需要安装 vue, 若是第一次使用, 应该还需要安装

npm install -g @vue/cli-service-global

首先, 初始化一个目录, npm init

一路按 确定 即可

38

init 完成之后,

我们本地新建一个.vue 文件, 然后使用 vue serve index.vue 启动文件

在文件里正常编写我们的代码即可, 例如我写了一个提示用户进行微信分享的小组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<style scoped>
.....
</style>
<template>
  <div class="friday">
    <div class="guide-board">
      <div class="flex-board guide-info">
        <div class="left-board">
          <div class="user-info">
            <div class="row">
              <div class="user-audio">
                <div class="avater" style="background-image: url(http://rescdn.yishihui.com/longvideo/pic/c8676c592b72428e88faa4176d7baa011650023705723);">
                  <img src="data:image/png;CYII=" class="play-btn">
                </div>
              </div>
              <span>点击右上角</span>
              <img class="dia"
                src="data:image/png;base64,iVBORw0KGgoAARrHQQi2stLuDK1IoNmeV7gjXhMQE4fAEG0Esh
            <div class="row">
              <span>分享给「朋友」或「朋友圈」</span>
            </div>
          </div>
        </div>
        <div class="right-board">
          <img class="icon-hand"
            src="data:image/pn" alt="">
        </div>
      </div>
      <img src="https://vlogh5.piaoquantv.com/core/static/img/wx_native_share_bar.3bbdeb4.png" alt="" class="guide-img" />
    </div>
  </div>
</template>
 
<script>
/**
* Created by iyahe@qq.com
* Date: 2022/7/4
* Time: 2:09 下午
* Description:
*/
export default {
  name: "friday",
  mixins: [],
  data() {
    return {}
  },
  computed: {},
  watch: {},
  components: {},
  methods: {},
  created() {
  },
  mounted() {
  },
}
</script>

 

组件开发完成后, 我们第一步需要新建一个js文件

1
2
3
4
5
import tips from "./index.vue";
const install=(Vue)=>{
  Vue.component(tips.name, tips)
}
export default install

这里需要注意: tips.name 这里就是注册组件名称, 若是组件里没有写 name, 这里需要手动写一个名称,

完成后我们开始打包组件,

我们在 package.json 里写入打包命令

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "friday-tips",
  "version": "1.0.0",
  "description": "",
  "main": "friday/friday.umd.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "build": "vue build --target lib ./index.js --dest friday --name friday"
  },
  "author": "",
  "license": "ISC"
}

 

其中的 friday 是目录名称, 我们打包到这个目录, 执行编译后, 我们可以看到

 

iShot_2022-07-04_15.31.45

什么是 umd ?

commonJS、requireJS 都是用来处理JS模块化的,其中 commonJS 用来给 nodejs 使用(使用了 module.exports 的用法)。后来使用 import/export 来导出/引入模块。umd 是统一模块定义方法,可以兼容所有其他的模块定义方法。

将 生成的 xx.umd.js 写入到 package.json 的 main 入口;

打包完成后, 我们开始上传到 npm

这里需要注意, 若是使用过 npm, yarn 等, 建议安装一个 nrm ,手动切换到 npm 服务器

SM xxx-mobile % nrm ls

npm ———- https://registry.npmjs.org/
yarn ——— https://registry.yarnpkg.com/
tencent —— https://mirrors.cloud.tencent.com/npm/
cnpm ——— https://r.cnpmjs.org/
taobao ——- https://registry.npmmirror.com/
npmMirror —- https://skimdb.npmjs.com/registry/
jd ———– http://registry.m.jd.com/

SM xx-mobile %

切换过去后, 直接登陆就可以了, npm login

登陆成功后, 执行 npm publish 开始发布

若不出意外, 发布成功后可以在 npm 官网个人中心看到了!

偶尔遇到报错提示发布失败, 实际发布成功!

发布成功后, 我们随便找一个项目, 安装我们的组件库看看

直接 npm install xxx

安装完成后, 我们先全局注册一个看看效果!

1
2
3
import friday from 'friday-tips'
import 'friday-tips/friday/friday.css' // 引入样式文件
Vue.use(friday)

注意要把 css 引入进来, 然后我们组件里直接使用 <friday /> 就可以了!

若要在实际项目里调试, 还有一个小技巧!

我们直接在组件目录打包完成后, 将

iShot_2022-07-04_15.31.45

直接拷贝到我们已安装过 组件的项目的 node_modules 目录里可以直接看到效果,

我们可以打开 node_modules 目录, 找到我们的插件目录 friday-tips , 然后直接拷贝覆盖就可以了!

2024 年 2 月 22 日更新:

直接抛出组件

1
2
import tips from "./index.vue";
export const friday = tips;

直接引入到文件内使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.1/vue.min.js"></script>
    <script type="text/javascript" src="./friday/friday.umd.js"></script>
    <link rel="stylesheet" href="./friday/friday.css">
</head>
<body>
<div id="app">
    <div class="p">
        <p>你好啊</p>
        <div class="last">
            <div id="end"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    setTimeout(_=> {
        const app = new Vue({
            el: '#end',
            components: {
                'myComponent': window.friday.friday
            },
            template: '<myComponent></myComponent>'
        });
    }, 1000)
</script>
</body>
</html>

 

 

 

 

分享到:更多 ()

相关推荐

  • AI 编辑器 cursor 如何禁止自动更新
  • AI 编辑器 cursor 工具栏改成和 vscode 一样的左侧 竖向展示
  • nodejs 脚本打包为可执行文件
  • 初学 python 笔记
  • nodejs 同时运行多个脚本
  • 让你的照片动起来
  • vue工程项目动态加载umd.js实践
  • 使用 shell 检测目标服务器是否异常
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图