如何发布自己的npm包(vue组件)

简介: 如何发布自己的npm包(vue组件)

请添加图片描述

如何在NPM上发布自己的第一个vue组件库,是每一名vue前端开发人员必经的进阶之路,本文将结合作者的实践项目,为各位读者详细讲解所有的操作步骤,相信你在阅读本文后,就能立马动手。

由于本文的主要目的是讲解如何创建组件库并发布到NPM,因此对于组件的创建会一笔带过。

1.创建项目

打开cmd在项目中输入一下命令初始化一个vue的项目,名称自定义

vue create app

在src的同级目录下新建一个名称为myComponents的组件库,如图所示
请添加图片描述

2.配置自己的项目

myComponents是新增的一个目录,默认不被webpack处理,所以需要在vue.config.js里面配置组件库,以便webpack编译,没有vue.config.js的话,就在目录下新建一个。并在vue.config.js填入一下内容

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    devtool: 'source-map'
},
// 强制内联CSS
css: {
    extract: false
},
// 扩展 webpack 配置,使 components 加入编译
chainWebpack: config => {
    config.module
        .rule('js')
        .include
        .add('/myComponents')//这里根据你文件夹名称自定义,每个人不一样
        .end()
        .use('babel')
        .loader('babel-loader')
        .tap(options => {
            // 修改它的选项...
            return options
        })
}

})

3.编辑自定义组件库

请添加图片描述

  1. myComponents文件加下新建一个tinyMce文件夹(此文件夹即是你对组件的命名),同时,在此文件夹下新建一个src目录,src下创建的.vue文件最好保证与文件夹tinyMce命名一致。
  2. 分别在myComponents文件夹和tinyMce文件夹下新建index.js文件,这是他们的入口文件,注意路径如上图所示,不要弄错了。
  3. 要将所有的静态资源文件等等放入myComponents文件夹下,比如我就放在了assets目录下,因为外部的其他文件是不会被打包上传的。

tinyMce/src/tinymce.vue为例子,你们可以依照自己的组件名称进行对应的修改,代码如下:

import tinymce from './src/tinymce'

// 为组件提供 install 安装方法,供按需引入
tinymce.install = Vue => {
    Vue.component(tinymce.name, tinymce)
}

// 默认导出组件
export default tinymce

编写myComponents/index.js文件,对组件库进行导出。

import tinymce from './tinyMce/index'
const components = [
    tinymce
]
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = Vue => {
    // 判断是否可以安装
    if (install.installed) return
        // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default {
    // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
    install,
    // 以下是具体的组件列表
    tinymce
}

4.进行本地测试能否正常使用

请添加图片描述

如图在本地的src(注意不是tinyMce下的)下的main.js导入组件并使用,并在APP.vue里面直接使用自己的组件。请添加图片描述

并使用npm run serve运行查看能否运行成功

请添加图片描述

我成功了,接下来就可以来发布自己的npm包了

5.配置发布

在package.json的sript命令中新增一条编译组件库的命令

"lib": "vue-cli-service build --target lib --name landscape-components --dest lib myComponents/index.js"

执行编译命令 --- npm run lib

在这里插入图片描述

编译成功后,会得到一个lib文件夹如图所示

请添加图片描述

5.1配置package.json文件

参考如下

  "name": "chdemo_tinymce",//组件名称
  "version": "0.1.1",//版本号
  "private": false,//原来为true,要改成false,否则发布不出去
  "description": "tinymce富文本编辑器的插入文本图片等接口集成", //包的描述
  "main": "lib/landscape-components.umd.min.js", //入口文件
  "keywords": ["tinymce"],//关键词
  "author": { "name": "ymktchic" }, //作者

5.2添加.npmignore文件

这一步比较重要,旨在发布npm包的时候忽略不必要的文件上传,需要编译上传的只有lib文件夹,package.json,README.md这三个,其他的都可以忽略。

可以按照我的配置,配置如下

# 忽略目录
src
myComponents
node_modules
public
utils
# 忽略指定文件
vue.config.js
babel.config.js
*.map
jsconfig.json

6.发布自己的npm包

先在 npm 官网(https://www.npmjs.com/)上注册一个账号,注册过程略。此处注意注册完需要2FA六位动态码绑定,动态码每隔半分钟更新一次,此动态码用于发布,可以在个人Account里面去根据流程操作进行绑定。
请添加图片描述

登录

注册成功后,在输入npm login,一下要依次输入你的用户名,密码,邮箱和六位动态码

npm login

请添加图片描述

如果提示上图信息,便表示登录成功,接下来使用如下命令发布

如果没发布成功,可以尝试把原来使用淘宝镜像源的更换成官方源,因为淘宝是只读源

npm config set registry https://registry.npmjs.org
npm publish

如果提示输入--ocp的话,就再一次输入自己的六位动态码即可。

如果收到了npm发来的邮箱,便表示你发布成功啦。

请添加图片描述

下载使用

  1. 使用vue create app

新建一个项目 ,然后在项目下输入以下命令

npm install chdemo_tinymce//我的包是chdemo_tinymce,你们的是什么就填什么即可

如果安装不成功,依然是要换成官方镜像源,使用如下命令

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

如图,同样是在main.js中引入自己的文件
请添加图片描述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hyeIPyLn-1656645076866)

然后在APP.vue里面自己使用,无需注册。

请添加图片描述
请添加图片描述

这样就大功告成啦!

感谢阅读,记录自己的踩坑经验,总结,希望帮到各位。
腾讯云服务器,65
在这里插入图片描述

目录
相关文章
|
11天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
1天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
7 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
13天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
37 5
Vue使用element中table组件实现单选一行
|
1天前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
8 2
|
1天前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
7 1
|
2天前
|
存储 JavaScript 前端开发
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
10 1
|
10天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
12天前
|
JavaScript
使用npm,快速构建第一个vue项目
本文介绍了如何使用npm快速构建第一个Vue项目。步骤包括确保安装了Node.js并且配置了正确的环境变量,创建一个空文件夹并使用VSCode打开,通过VSCode的终端执行`npm init vue@latest`命令以初始化项目,选择默认配置即可。接着安装项目依赖并启动开发服务器,最后通过浏览器访问开发服务器提供的本地地址查看项目运行结果。文章还提供了相关代码和操作截图。
|
12天前
|
JavaScript 前端开发 Java
vue-day03 组件基础
文章介绍了Vue.js中组件的基础概念、注册格式、命名方式、全局与局部注册的区别、prop属性的详细使用以及通过prop向子组件传递数据的方法,并提供了计数器和博文小组件的实例。
|
12天前
|
缓存 JavaScript 前端开发
8种方法解决vue创建项目报错:command failed: npm install --loglevel error
该文章提供了八种解决Vue项目创建时遇到的`command failed: npm install --loglevel error`错误的方法,包括清理缓存、更换npm源、重新安装Node.js等措施。
8种方法解决vue创建项目报错:command failed: npm install --loglevel error