plugin-message-zhb

A Vue.js project

Usage no npm install needed!

<script type="module">
  import pluginMessageZhb from 'https://cdn.skypack.dev/plugin-message-zhb';
</script>

README

文档

1. npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i plugin-message-zhb -S

2. 引入 plugin-message-zhb

在 main.js 中写入以下内容:

import Vue from 'vue'
import App from './App'
import plugin from 'plugin-message-zhb'
Vue.use(plugin)
Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App)
})

3. 在组件中使用

<template>
  <div class='content'>
    <button @click="handle()">点击测试</button>
  </div>
</template>
<script>
export default
  methods: {
    handle () {
      // 调用插件
      this.$message({
        message: '警告哦,这是一条警告消息',  // 消息框的文本内容
        type: 'warning',   // 消息框的类型 目前就设置了(warning和success)
        time: 2000  // 消息后多少s之后消失
      })
    }
  }
</script>
<style lang='less' scoped>
</style>

plugin-message

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.