75、 vue的插件開發(fā)和混入mixin使用

1.本地開發(fā)

1.1 初始化本地開發(fā)項目

我們采用vue-cli疤孕，初始化一個vue 項目。這個不做詳解

其他的文件目錄不是本節(jié)內(nèi)容重點距境，不做詳解

1.2 test.js 的內(nèi)容申尼，這是插件的入口文件

關(guān)于為什么需要在install這個方法這里添加我們的方法，可以參考官網(wǎng)垫桂。https://cn.vuejs.org/v2/guide/plugins.html 這里只是用了其中的一部分的內(nèi)容师幕。

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 文件，這兩個文件就是我們需要開發(fā)的組件樣式诬滩。

panel.vue

<template>
  <div>
    <div class="number-panel">
      <p v-show="checkedNumber.length>0" class="number-show">{{checkedNumber}}</p>
      <p v-show="!checkedNumber" class="number-show">  </p>
      <ul>
        <li @click="clickThisNumber($event)" v-for="index in 9" :key="index">{{index}}</li>
        <li @click="clickThisNumber($event)">0</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test-panel',   // 這里需要注意下霹粥，我們是采用的全局注入我們的組件，所以在后面因為我們的組件后疼鸟，會直接使用這個命名的標(biāo)簽
  data () {
    return {
      checkedNumber: ''
    }
  },
  components: {
  },
  methods: {
    clickThisNumber (e) {
      this.checkedNumber = this.checkedNumber.concat(e.currentTarget.innerHTML)
    }
  }
}
</script>

<style>
  .number-show {
    height: 20px;
  }
  .number-panel ul {
    padding: 0;
  }
  .number-panel ul li{
    display: inline-block;
    width: 28%;
    height: 50px;
    line-height: 50px;
    margin-top: 20px;
    background: #ddd;
    border-radius: 8px;
    margin-right: 10px;
  }
  .number-panel ul li input {
    display: none;
  }
</style>

實現(xiàn)的效果如下：

image

點擊面板上的數(shù)字后控，及時展現(xiàn)在上面，具體的樣式不做詳解空镜，邏輯很簡單浩淘。

toast.vue

<template>
  <div>
    <div class="toast"  ref='toastPosition' :class="{active: toastHidden}">
      <div class="toast-warpper">
         {{text}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test-toast',
  data () {
    return {
      text: '',
      toastHidden: false
    }
  },
  created () {
    // this.toastPlugin()
  },
  components: {
  },
  methods: {
    toastPlugin (msg, time) {
      this.text = msg
      this.toastHidden = true
      setTimeout(() => {
        this.toastHidden = false
      }, time)
    }
  }
}
</script>

<style>
  .toast {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0px;
    min-height: 0px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: #fff;
    transition: all 0.5s;
    z-index: -1;
    opacity: 0;
  }
  .toast.active {
    width: 150px;
    min-height: 25px;
    opacity: 1;
    z-index: 11;
  }
</style>

效果如下：

這里模擬的是，調(diào)用該插件的toast 方法吴攒。

2.本地測試

我們上面就直接給出了我們要完成的內(nèi)容张抄，但是怎么確定我們這個寫的樣式或者方法可以用呢？所以需要測試下洼怔，我們到底寫的是個什么鬼署惯。

**main.js 全局import **

具體頁面使用我們的插件：

image

<template>
  <div>
    <div >
      <p>test</p>
      <p>
        <button @click="getChildrenFunction">點擊觸發(fā)子組件的toast</button>
      </p>
      <div>
        <p>點擊面板上的內(nèi)容</p>
      </div>
      <test-panel ref="panel"></test-panel>
      <test-toast ref="toast"></test-toast>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      testArr: [1, 2, 6],
      test1:{
          name:'zhang',
          age:324,
          
      }
    };
  },
  components: {},
  created(){
    console.log("1222", this.$data);
    console.log("2", this.$myMethod(this.testArr));
    this.$nextTick(() => {
      console.log(this.testArr);
    });
  },
  methods: {
    getChildrenFunction() {
      this.$nextTick(() => {
        this.$refs.toast.toastPlugin("在父組件里調(diào)用的toast", 2500);
      });
    }
  }
};
</script>

<style>
.number-show {
  height: 20px;
}
.number-panel ul {
  padding: 0;
}
.number-panel ul li {
  display: inline-block;
  width: 28%;
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
  background: #ddd;
  border-radius: 8px;
  margin-right: 10px;
}
.number-panel ul li input {
  display: none;
}
</style>

此時的this.$data數(shù)據(jù)是

可以看出mixin是可以提供多個組件重復(fù)使用一個方法或?qū)傩赃@里先簡單說到這里
　　兩個效果如下：

image

3.打包到npm

測試完成，可以實現(xiàn)我們的想要的內(nèi)容镣隶。下面我們就要把我們的內(nèi)容打包發(fā)布到npm 上去极谊。

為了不和開發(fā)的項目環(huán)境發(fā)生沖突，我們采用另外一個項目矾缓，專門做打包發(fā)布的怀酷。

工具：

webpack-simple 這個簡化版的webpack。初始化項目嗜闻，點擊這里, https://www.cnblogs.com/majj/p/9054471.html蜕依。刪掉我們不需要的文件夾，新建一個我們要放置我們開發(fā)代碼，完成如下：

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標(biāo)準(zhǔn)的友瘤，也可以是指amd標(biāo)準(zhǔn)的，也可以只是通過script標(biāo)簽引入的檐束。
    umdNamedDefine: true // 會對 UMD 的構(gòu)建過程中的 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

執(zhí)行 npm run build 打包

image

75为朋、 vue的插件開發(fā)和混入mixin使用

1.本地開發(fā)

1.1 初始化本地開發(fā)項目

1.2 test.js 的內(nèi)容 申尼，這是插件的入口文件

2.本地測試

3.打包到npm

1.2 test.js 的內(nèi)容申尼，這是插件的入口文件