75、 vue的插件开发和混入mixin使用

1.本地开发

1.1 初始化本地开发项目

我们采用vue-cli，初始化一个vue 项目。这个不做详解

其他的文件目录不是本节内容重点，不做详解

1.2 test.js 的内容 ，这是插件的入口文件

关于为什么需要在install这个方法这里添加我们的方法，可以参考官网。https://cn.vuejs.org/v2/guide/plugins.html 这里只是用了其中的一部分的内容。

test.js的代码如下：

import testPanel from './panel.vue'
import testToast from './toast.vue'
let test = {}
test.install = function (Vue, options) {
  Vue.prototype.$msg = 'Hello I am test.js'
  Vue.prototype.$myMethod = function (arr) {
    if (arr.length < 0) {
      return false
    } else {
      arr = arr.join('连接你我')
      return arr
    }
  }
  Vue.mixin({
      data(){
          return {
              test1:{
                  name:'wushijie',
                  sex:1
              }
          }
      },
    created: function () {
      this.kk();
    },
    methods: {
        kk(){
            console.log(this.test1);
        }
    },
    
  })
  Vue.component(testPanel.name, testPanel) // testPanel.name 组件的name属性
  Vue.component(testToast.name, testToast) // testPanel.name 组件的name属性
}
export default test

test.js 里面引入的两个vue 文件，这两个文件就是我们需要开发的组件样式。

panel.vue

实现的效果如下：

image

点击面板上的数字，及时展现在上面，具体的样式不做详解，逻辑很简单。

toast.vue

效果如下：

这里模拟的是，调用该插件的toast 方法。

2.本地测试

我们上面就直接给出了我们要完成的内容，但是怎么确定我们这个写的样式或者方法可以用呢？ 所以需要测试下，我们到底写的是个什么鬼。

**main.js 全局import **

具体页面使用我们的插件：

image

此时的this.$data数据是

可以看出mixin是可以提供多个组件重复使用一个方法或属性这里先简单说到这里
　　两个效果如下：

image

3.打包到npm

测试完成，可以实现我们的想要的内容。下面我们就要把我们的内容打包发布到npm 上去。

为了不和开发的项目环境发生冲突，我们采用另外一个项目，专门做打包发布的。

工具：

webpack-simple 这个简化版的webpack。 初始化项目，点击这里, https://www.cnblogs.com/majj/p/9054471.html。删掉我们不需要的文件夹，新建一个我们要放置我们开发代码，完成如下：

image

修改webpack.config.js的打包名称

image

代码如下：

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

module.exports = {
  entry: './src/lib/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'toastPanel.js',
    library: 'toastPanel', // library指定的就是你使用require时的模块名，这里便是require("toastPanel")
    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
    })
  ])
}

打包的项目清单配置文件：

image

执行 npm run build 打包

image