一、创建一个 工程目录

maque-cloud-ui-components

并建立工程结构

package.json
packages
  --input
    --index.js
    --index.vue
index.js

package.json 文件内容

{
  "name": "maque-cloud-ui-components",
  "version": "1.0.2",
  "description": "通用前端组件",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^2.5.11",
    "element-ui": "^2.15.3",
  }
}

packages/input/index.js 内容

import input from "./index.vue"
input.install=(Vue)=>{
    Vue.component(input.name,input)
}
export default input

packages/input/index.vue 内容

<template>
    <el-input v-model="txtValue"></el-input>
</template>

<script>
    export default {
        name: "maque-input",
        props: {
            value: String,
        },
        data: function () {
            return {
                txtValue: ""
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        watch: {
            value: {
                handler: function (val) {
                    if (val != this.txtValue) {
                        this.txtValue = val;
                    }
                },
                immediate: true
            },
            txtValue: {
                handler: function (val, oldValue) {

                    this.$emit('change', val);

                },
                immediate: true
            }
        },
    }
</script>

<style scoped>

</style>

/index.js内容

import MqInput from "./packages/input"

export {
    MqInput
}

建立好之后，执行npm install,自动载相关依赖

为了可以本地进行开发调试，执行

npm link

组件以后不调试了，请执行

npm unlink

二、引用组件

新建一个VUE DEMO 工程，采用Vue2.0开发

vue create maque-cloud-ui-components-demo

在目录下执行命令

npm link maque-cloud-ui-components

组件以后不调试了，请执行

npm unlink maque-cloud-ui-components

在main.js 中加载组件

import {MqInput} from "maque-cloud-ui-components"
Vue.use(MqInput)

在VUE页面中写好

<maque-input v-model="txt"></maque-input>
{{txt}}

脚本中增加

data: function () {
    return {
        txt:"test"
    }
},

调试完成后，就可以进行发布了

三、发布NPM包

1、先到 npmjs.org/ 注册一个账号

2、把npm 源换成为官方地址

npm config set registry https://registry.npmjs.org

3、到目录 maque-cloud-ui-components 执行 npm login

输入账号密码，邮箱，登陆。

4、执行

npm publish

发布

发布成功后就可以到官网看你的发布内容了。

发布成功后，如果要更新内容只能修改版本号再进行发布。