使用vue-cli编写第一个vue小插件

使用vue-cli编写第一个vue小插件
1.使用cli创建一个vue项目

vue init webpack  ”项目名称“

2.在build目录下创建一下插件打包配置文件

//webpack.dist.conf.js
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/lib/index.js', //打包js文件入口
  output: {
    path: path.resolve(__dirname, '../dist'), //打包路径
    publicPath: '/dist/',  //打包到目录下
    filename: 'vue-toast-tip.js', //打包到js文件名
    library: 'vue-toast-tip', // library指定的就是你使用require时的模块名，这里便是require("vueAjaxUpload")
    libraryTarget: 'umd', //libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的。
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define。
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

3.src目录下创建一个lib文件夹存放插件文件

//toast.vue
<template>
  <div class="toast" v-if="show">
      {{text}}
  </div>
</template>


<script>
export default {};
</script>


<style>
/* 公共样式 */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.2rem;
  border-radius: 0.1rem;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  font-size: 0.26rem;
}
</style>

4.index.js文件内容

// toast组件
import toastComponent from './toast.vue'
let toast = {

}
toast.install = function (Vue, options) {
    // Vue 就是 vue 实例
    // options 就是 Vue.use(plugin，options) 传入的第二个参数 options
    // 返回一个 扩展实例构造器
    const ToastConstructor = Vue.extend(toastComponent)
    // 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间

    function showToast(text, duration = 1000) {
        //防止再次加载插件
        // 实例化一个 toast.vue
        const toastDom = new ToastConstructor({
            el: document.createElement('div'),
            data() {
                return {
                    text: text,
                    show: true
                }
            }
        })

        // 把 实例化的 toast.vue 添加到 body 里
        document.body.appendChild(toastDom.$el)

        // 过了 duration 时间后隐藏
        setTimeout(() => { toastDom.show = false }, duration)
    }

    // 将组件注册到 vue 的 原型链里去,
    // 这样就可以在所有 vue 的实例里面使用 this.$toast()
    Vue.prototype.$toast = showToast

}
export default toast;

5.添加上传过滤文件
添加.gitignore文件过滤

build/
config/
src/
static/
test/
index.html/
package.json
...自选

6.配置package.json文件

"main": "dist/xxx.js", //必填项 不写这个导入插件时会报错
scripts
 "dist": "webpack --config build/webpack.dist.conf.js",
    "pub":"npm run dist&& npm publish"

7.打包插件执行

npm run dist

8.已经登陆npm的情况下发布到npm

npm publish

9.第一个基于vue的小插件就完成啦

1.vue-toast提示小插件
2.vue冒泡动画小插件