Vue自定义弹窗组件（二）发包测试

参考 参考

新建一个vue项目并运行

vue init webpack rty-prompt-dialog  //新建一个vue脚手架空项目
npm install 
npm run dev

删除不必要代码（可选）写一个按钮方法

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="hintPress">hint</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Vue prompt-dialog!'
    }
  },
  methods: {
    hintPress() {
      this.$hint('hello Vue!')
    }
  },
}
</script>

修改helloword

模拟已发包组件

在node_modules中新建rty-prompt-dialog文件（模拟已发布包，最后会提交发布）

目录结构

目录结构

package.json文件可先不建

main.vue

<template>
  <div class="prompt_hint" v-if="isShow">
    {{message}}
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'prompt-hint',
    data () {
      return {
        message: '',
        time: 2000,
        isShow: true
      }
    },
    mounted () {
      this.close()
    },
    methods: {
      close () {
        var this_ = this
        window.setTimeout(function() {
          this_.isShow = false
        }, this.time);
      }
    }
  }
</script>

<style type="text/css">
  .prompt_hint{
    position: fixed;
    padding: 10px 20px;
    color: #fff;
    background: #5F6161;
    border-radius: 4px;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100
  }
</style>

hint/index.js

import Vue from 'vue'
import Hint from './src/main.vue'

Hint.installHint = function(options) {
  if (options === undefined || options === null) {
    options = {
      message: ''
    }
  } else if (typeof options === 'string' || typeof options === 'number') {
    options = {
      message: options
    }
  }
  var hint = Vue.extend(Hint)

  var component = new hint({
    data: options
  }).$mount()
  document.querySelector('body').appendChild(component.$el)
}

export default Hint

rty-prompt-dialog/index.js

import promptHint from './packages/hint/index.js'

const install = function(Vue) {
  Vue.component(promptHint.name, promptHint)
  Vue.prototype.$hint = promptHint.installHint
}
export default install

引入临时包main.js

import Prompt from '../node_modules/rty-prompt-dialog/index.js'
Vue.use(Prompt)

测试成功

测试成功--发正式包引入

npm init 
npm publish

查看已发布的包

发布成功

正确的引入main.js

import Prompt from 'rty-prompt-dialog'

使用

this.$hint('hello Vue!')