二次封装elementui,封装成vue组件，并发布到npm上

elementui在开发vue项目时很好使，然而公司在开发时，总有一些特殊也常用的需求，比如整数框，elementui的’el-input-number’框限制数值，但是可以输入其他字符，blur时自动清空保留数值，但是公司要求不能输入其他字符，所以就需要根据公司的需求进行二次封装，并发布在npm上以便在项目中使用。

1. 选择一个文件夹（组件库项目所在文件夹），在路径中输入cmd按下’回车‘打开终端
   

2. 创建vue项目vue create myEle
   

3. vue项目创建成功后，目录结构如下：
   

4. 在components下添加若干个vue文件，用于封装组件。组件内容如下，以input_number为例。
   

<template>
    <el-input-number id="InputNumber"
                     style="width: 100%;"
                     size="small"
                     placeholder="请输入整数"
                     percision="0"
                     :controls="false"
                     @keyup.native="valueChange"
                     @keydown.native="valueChange"
                     :max="100000000"
                     v-model="insideValue"
                     v-bind="$attrs"
                     v-on="$listeners">
    </el-input-number>
</template>

<script>
    export default {
        name: 'input_number',
        // 让父组件 v-model 传参
        model: {
            prop: 'numberValue',
            event: 'change',
        },
        props: {
            numberValue: {
                type: [Number, String],
                default: undefined,
            }
        },
        data() {
            return {
                insideValue: undefined
            };
        },
        methods: {
            valueChange(e) {
                e.target.value = e.target.value.replace(/[^\d]/g, '')
                if (e.target.value > 100000000) {
                    e.target.value = 100000000
                }
            }
        }
    };
</script>
<style lang="less" scoped>
    #InputNumber /deep/ .el-input__inner {
        text-align: left;
    }
</style>

5. 在components下添加一个index.js文件，用于注册第四步封装的组件并暴露出方法。

import {message} from './message.js';
import InputNumber from './input_number';
import InputUserName from './input_userName';
import InputPassword from './input_password';
import PageLayout from './page_layout'
const MyEle = {
    install(Vue) {
        // 在此处添加自定义的全局组件
        Vue.component('InputNumber', InputNumber);
        Vue.component('InputUserName', InputUserName);
        Vue.component('InputPassword', InputPassword);
        Vue.component('PageLayout', PageLayout);
        //在此处添加自定义的全局方法
        Vue.prototype.$message = message;
    }
};
export default MyEle;

6. 在main.js文件中引入组件
   
7. 在views文件夹下面新建一个usageExamples.vue文件，用于测试组件封装。
   
8. 运行项目，npm run serve,测试封装是否成功，若有报错，挨个查询解决即可。
9. 第八步没有问题后，说明组件封装成功，接下来将组件包上传到npm。

组件包上传到npm

1.去npm官网注册一个账号，绑定qq邮箱。记住账号密码。
2.修改package.json。


3. 在package.json设置忽略发布文件。我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的设置。

4.登录npm账号。

5.执行npm run lib进行打包
6.步骤五成功后，目录会多一个lib文件夹，里面存放的是我们打包的文件

7.执行npm publish发布到npm上。
8.在其他项目安装npm install myEle
9.在其他项目main.js中引入

至此，封装组件，上传到npm,并在其他项目引用就完成了。注意：上传到npm时，每次都需要更改版本号。