本篇文章為大家展示了使用vue-cli怎么編寫(xiě)一個(gè)vue插件，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

常寧ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話(huà)聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！

1、vue init webpack-simple 生成項(xiàng)目目錄

2、調(diào)整目錄結(jié)構(gòu)

3、修改webpack.config.js

var path = require('path')
var webpack = require('webpack')

module.exports = {
 entry: './src/index.js',
 output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'vue-toast.js',
  // 打包后的格式（三種規(guī)范amd,cmd,common.js)通過(guò)umd規(guī)范可以適應(yīng)各種規(guī)范，以及全局window屬性
  libraryTarget:'umd',
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader',
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
   },
   
  ]
 },
 plugins:[]
}

開(kāi)發(fā)一個(gè)toast插件，可以借助npm平臺(tái)發(fā)布，在這里就不做過(guò)多的說(shuō)明了

toast.vue

index.js

import ToastComponent from './toast.vue'
let Toast = {};
Toast.install = function(Vue, options = {}) {
  // extend組件構(gòu)造器
  const VueToast = Vue.extend(ToastComponent)
  let toast = null
  function $toast(params) {
    return new Promise( resolve => {
      if(!toast) {
        toast = new VueToast()
        toast.$mount()
        document.querySelector(options.container || 'body').appendChild(toast.$el)
      }
      toast.show(params)
      resolve()
    })
  }
  Vue.prototype.$toast = $toast
}
if(window.Vue){
  Vue.use(Toast)
}
export default Toast

npm run build 之后就會(huì)在根目錄下生成dist文件

接下來(lái)就可以使用了

demo.html

 
 
 
 
 
 



 
  
vue-toast，{{msg}}
  
   默認(rèn)效果