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

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

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

有需要的朋友，也可以直接访问本文实例的GitHub地址：github.com/jiangjiahen…。

实例讲解

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

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文件夹编写自己的组件库了。

创建组件的文件夹，例如：calculator、helloWorld的；
在组件的文件夹下创建src文件夹，并在该文件夹下创建一个同名的vue文件来编写组件；
然后在src同级目录下创建一个index.js文件作为该组件的入口文件；
最后在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 （www.npmjs.com/）上注册一个账号，注册过程略。

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

npm login

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

npm publish

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

7. 下载使用

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

npm install landscape-components

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

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

结语

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

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