本次开发的插件是基于d3.js的可视化数据图表。
以下以其中一个柱状图作为栗子，讲述自己的造轮子的过程

脚手架搭建一个初始化项目

vue create your-project-name

创建存放插件的目录

• 在src 下创建一个lib文件夹存放插件
• 在lib下创建一个文件夹（histogram）用于存放状态图组件。并选择histogram文件夹在终端打开， npm init 一下
• histogram下的lib文件夹是用于存放组件功能的， histogram下的index.js是用于导出histogram这个组件的

导出、导入过程

• 看一下 histogram下的index.js是如何导出histogram这个组件的

import histogram from './lib/index.vue'

// 定义我们的插件
const myPlugin = {
    // 该插件有一个install方法
    // 方法的第一个参数是传入的Vue，第二个参数可以插件的自定义参数
    install (Vue) {
        // 将其注册为vue的组件，'histogram'是组件名
        Vue.component('histogram', histogram)
    }
}

// 最后将插件导出，并在main.js中通过Vue.use()即可使用插件
export default myPlugin

• 导出后在main.js中可以全局引用一下

import histogram from './lib/histogram'
Vue.use(histogram)

最后就可以在页面中直接引用自己的组件了

    <histogram></histogram>