vue-plugin模块的生成

Vue-plugin制作

• 概述

目前，随着前端开发框架的愈发成熟，使用vue进行开发的程序越来越多，vue的重要性不言而喻，但是，为了兼容之前使用jquery或者原生js开发的框架，就需要vue开发能和之前的东西做兼容。所以，vue-plugin就显得格外重要

• 基本概念

为了能够进行vue-plugin的制作，这里需要介绍一下webpack。webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。而幸运的是，vue全家桶之一的vue-cli就是使用webpack进行打包的。所以，理论上，我们可以使用vue-cli去开发vue组件，之后，只需要使用webpack进行打包即可

三、操作流程

                   1. 第一步，需要使用vue-cli建立一个webpack打包的project

                   只需要执行vue init webpack-simple XXX 

        其中xxx为建立的工程名称

根据导航提示，设置好项目后，基本结构生成完成

删除无用内容   删除 index.html 和 src 目录下的所有文件

 

        之后，里面的文件如图所示。

       2.第二步，需要你使用vue-cli去开发你的插件，开发插件的过程，比较简单，主要包含了两部分内容，一个是js文件，一个是vue文件

    

其中vue文件是你的插件的具体插件，

Js文件是你的打包入口

import carsuel from './carsuel.vue'

let imageCarusel = {}

// install 是必须的，即安装注册

imageCarusel.install = function (Vue, options) {

  Vue.prototype.$carsuel = carsuel

  Vue.prototype.$toast = function(){

    Vue.extend(ToastComponent)

}

  // 可以动态扩充方法

  Vue.prototype.$myMethod = function (arr) {

    if (arr.length < 0) {

      return false

    } else {

      arr = arr.join('连接你我')

      return arr

    }

  }

  // Vue.prototype.$imageCarusel = function () {

  //   Vue.extend(carsuel)

  // }

  // 注册插件的插件名称，即你将使用的template默认名称

  Vue.component(carsuel.name, carsuel)

}

if (window.Vue) {

  //如果是直接用script标签引入插件，可通过此法注册插件到vue

  Vue.use(imageCarusel)

}

// import 时需要

export default imageCarusel

其中的步骤和含义可以参考里面的注释。

Vue文件，给出示例

<template>

    <div style="width:100%;height:100%;position:relative">

      <div style="width:100%;height:100%;position:relative">

      <el-carousel

      height:150px>

      <el-carousel-item v-for="(number ,item) in group" :key="item">

        <img 

        v-for="(value, key) in arr.slice(item*gnum, (item + 1)*gnum)"

        :style="styleObject"

        :key="key"

        :src="value"

        :fit="'fill'"/>

      </el-carousel-item>

    </el-carousel>

    <el-button @click="