详解:如何在NPM上发布自己的第一个Vue组件库

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

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

有需要的朋友,也可以直接访问本文实例的GitHub地址:https://github.com/jiangjiaheng/Learn-NPM/tree/master/Components/landscape-components

实例讲解

在这里插入图片描述

本文将通过创建一个计算器和文字标题组件,来展示创建及发布组件的全部过程。

1. 创建项目

在文件夹中用Vue-CLI3的命令创建一个名为landscape-components的项目,项目名称可以自定义。

vue create landscape-components

在这里插入图片描述

创建好项目后,在src的同级目录下添加一个myComponents的文件夹,这个文件夹将用来存放我们创建好的组件。

2. 配置项目

myComponents 是我们新增的一个目录,默认是不被 webpack 处理的,所以需要添加配置对该目录的支持。

我们在src同级的目录下创建一个名为vue.config.js的文件,用来配置我们的组件库,为后面编译组件提供支持。

// vue.config.js 文件配置如下

module.exports = {
    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. 创建组件库

在创建并配置好项目后,我们就可以在myComponents文件夹编写自己的组件库了。

在这里插入图片描述

  1. 创建组件的文件夹,例如:calculator、helloWorld的;
  2. 在组件的文件夹下创建src文件夹,并在该文件夹下创建一个同名的vue文件来编写组件;
  3. 然后在src同级目录下创建一个index.js文件作为该组件的入口文件;
  4. 最后在myComponents文件夹创建一个index.js文件作为整个组件库的入口文件。

以helloWorld/src/index.js为例,文件代码示例如下:

// 导入的组件必须在vue文件中声明 name, 否则组件无法注册使用
import helloWorld from './src/helloWorld'

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

// 默认导出组件
export default helloWorld

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


import calculator from './calculator'
import helloWorld from './helloWorld'
const components = [
    calculator,
    helloWorld
]
// 定义 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,
    // 以下是具体的组件列表
    calculator,
    helloWorld
}

4. 本地调试

创建好组件库后,需要首先在本地进行调试,确保组件的可以正常使用。

在这里插入图片描述

如图所示,在src/main.js文件中,添加并注册自己创建的组件库。

在这里插入图片描述

然后在src下面的vue文件中直接使用组件库中的组件,然后运行调试。

在这里插入图片描述

如图所示,组件库使用成功,接下来就可以开发组件库了。

5. 配置发布文件

5.1 编译组件库

在package.json的script命令中新增一条编译组件库的命令——npm run lib。

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

执行编译命令——npm run lib。

在这里插入图片描述

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

在这里插入图片描述

5.2 配置package.json文件

配置参考如下。

"name": "landscape-components", // 组件库名称

"version": "0.2.0", // 组件库版本号

"description": "landscape的Vue组件库" // ,组件库描述

"main": "lib/landscape-components.umd.min.js", // 组件库入口文件,指向最终编译后的包文件

"keywords": ["landscape-components", "calculator", "helloWorld"], // 组件库关键词

"author": { "name": "jiangjiaheng" }, // 作者信息

"private": false, // 是否私有,需要修改为 false 才能发布到 npm
5.3 添加 .npmignore 文件

我们发布到 npm 中,只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要添加 .npmignore 文件,设置忽略目录和文件。

文件配置如下:

# 忽略目录
src/
myComponents/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

6. 发布到NPM

首先需要到 npm (https://www.npmjs.com/)上注册一个账号,注册过程略。

然后在终端执行登录命令,输入用户名、密码、邮箱即可登录。

npm login

在这里插入图片描述

登录成功后,输入命令,发布组件。

npm publish

在这里插入图片描述

发布成功后,一般会有npm发送给你的通知邮件,进入npm官方,登录自己的账号,查看刚刚发布的组件库。

在这里插入图片描述

7. 下载使用

发布成功后,我们就可以在别的项目中下载并使用我们创建的组件库了。

npm install landscape-components

在这里插入图片描述

在这里插入图片描述

然后在src/main.js中引入组件库。

在这里插入图片描述

最后在src下的vue文件中直接使用组件库中的组件,运行项目。

在这里插入图片描述

在这里插入图片描述

结语

以上就是本文的全部内容了,感谢你的阅读,文中部分技术要点受限于文章篇幅,并没有展开讲解,如果你有什么疑问或者建议,欢迎你随时留言,互相讨论。

最后,祝工作顺利,生活幸福。

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值