详解：如何在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文件夹编写本身的组件库了。

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 （www.npmjs.com/）上注册一个帐号，注册过程略。

而后在终端执行登陆命令，输入用户名、密码、邮箱便可登陆。

npm login
复制代码

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

npm publish
复制代码

发布成功后，通常会有npm发送给你的通知邮件，进入npm官方，登陆本身的帐号，查看刚刚发布的组件库。

7. 下载使用

发布成功后，咱们就能够在别的项目中下载并使用咱们建立的组件库了。

npm install landscape-components
复制代码

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

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

结语

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

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