基于Vue-Cli 4+Vue 创建、发布自己的 UI、 H5组件库打包并发布到 npm（霸霸看了都说好）

提供一个vue组件库模板脚手架: https://gitee.com/myPujun/vue-template-ui.git
下载即可用

也可以根据下方步骤一步一步操作来实现组件库的创建到发布到npm

1、创建项目

在指定目录中使用命令创建一个默认的项目，或者根据自己需要自己选择。

vue create add-ui

1.1 调整目录

我们需要一个目录存放组件，一个目录存放示例，按照以下方式对目录进行改造。

.
...
|-- examples      // 原 src 目录，改成 examples 用作示例展示
|-- packages      // 新增 packages 用于编写存放组件
...

1.2 创建测试组件

advancedform.vue:

<template>
    <div>
        <h3>{{name}}</h3>
        <div class="num">{{ count }}</div>
        <button @click="increment">自增</button>
    </div>
</template>
<script>
export default {
    name: 'advancedform',
    props: {
        name: String,
        default: ''
    },
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
};
</script>

packages/advancedform/index.js：

import advancedformfrom './src/advancedform';
export default Vue => {
    Vue.component(advancedform.name, advancedform);
};

package/index.js：

import advancedformfrom './advancedform';
const components = [advancedform];
const install = function(Vue) {
    if (install.installed) return;
    components.map(component => {
        Vue.use(component);
    });
};
//  全局引用可自动安装
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
}
export default {
    install,
    advancedform
};
export { advancedform };

3、配置项目以支持新的目录结构

我们通过上一步的目录改造后，会遇到两个问题。

src目录更名为examples，导致项目无法运行
新增**packages**目录，该目录未加入webpack编译
注：cli3 提供一个可选的 vue.config.js 配置文件。如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。

1、重新配置入口，修改配置中的 pages 选项
　　新版 Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。

这里使用 pages 修改入口到 examples

2、支持对 packages 目录的处理，修改配置中的 chainWebpack 选项
packages 是我们新增的一个目录，默认是不被 webpack 处理的，所以需要添加配置对该目录的支持。

chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。

4、根目录新增vue.config.js

const path = require('path')

module.exports = {
    // 修改默认的入口
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    },
    chainWebpack: config => {
        // vue默认@指向src目录，这里要修正为examples，另外新增一个~指向packages
        config.resolve.alias
            .set('@', path.resolve('examples'))
            .set('~', path.resolve('packages'));
        // lib目录是组件库最终打包好存放的地方，不需要eslint检查
        // examples/docs是存放md文档的地方，也不需要eslint检查
        config.module
            .rule('eslint')
            .exclude.add(path.resolve('lib'))
            .end()
            .exclude.add(path.resolve('examples/docs'))
            .end();
        // packages和examples目录需要加入编译
        config.module
            .rule('js')
            .include.add(/packages/)
            .end()
            .include.add(/examples/)
            .end()
            .use('babel')
            .loader('babel-loader')
            .tap(options => {
                // 修改它的选项...
                return options;
            });
    }
};

5、修改package.json

// npm输出的文件
"main": "lib/add-ui.common.js",
"author": "df",
// 新增命令
scripts: {
    "lib": "vue-cli-service build --target lib --name add-ui --dest lib packages/index.js"
}

然后将"private"改为 false,否则会报错如下：

6、发布到 npm，方便直接在项目中引用

6.1 在根目录添加 .npmignore 文件，设置忽略发布文件

我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。
和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。

# 忽略目录
examples/
packages/
public/

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

6.2 登录到 npm

tip : 发布之前需要登录

首先需要到 npm 上注册一个账号，注册过程略。
如果配置了淘宝镜像，先设置回npm镜像：

$ npm config set registry http://registry.npmjs.org 

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

//登录
$ npm login

6.3 发布到 npm

执行发布命令，发布组件到 npm

//发布
$ npm publish

6.4 发布成功

发布成功后稍等几分钟，即可在 npm 官网搜索到。(会发送邮件)

7、使用新发布的组件库

7.1 安装组件库依赖全局注册

在需要使用的vue项目中npm install add-ui添加进来，然后在main.js中进行全局注册，如下：

import { createApp } from 'vue'
import App from './App.vue'
import addUi from 'add-ui'
const app = createApp(App)
//组件注册
app.use(addUi )

app.mount('#app')

7.2 按需引入

import { createApp } from 'vue'
import App from './App.vue'
import {advancedform} from 'add-ui'
const app = createApp(App)
//组件注册
app.use(advancedform)

app.mount('#app')

7.3 在组件中使用

<template>
 　　<div>
     　　<advancedform :name="name"></advancedform>
 　　</div>
</template>