vue 添加全局组件_开发一个简单的 Vue UI 组件库（一）

# 2.x 版本
# 全局安装 vue-cli 工具
npm install -g vue-cli
# 初始化项目
vue init webpack MyComponent

# 3.x 版本
# 全局安装 vue-cli 工具
npm install -g @vue/cli
npm install -g @vue/cli-init
# 初始化项目
vue init webpack MyComponent

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  }
  // ...
}
​
// 修改后
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './example/main.js'
  }
  // ...
}

 <!--main.vue-->
<template>
  <button class="my-button"
          :class="['my-button-size-'+size]"
          @click="handleClick">
    <slot></slot>
  </button>
</template>
​
<script>
export default {
  name: 'MyButton',
  props: {
    // size 属性是用来控制按钮的大小样式，通过不同 size 设置不同的类名
    size: {
      type: String,
      default: 'big'
    }
  },
  methods: {
    /**
     * 用于触发 my-button 实例上的 click 事件
     */
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>
​
<style scoped>
  /* 初始化 button 的样式 */
  .my-button {
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    color: #000;
    text-align: center;
    outline: none;
    font-size: 14px;
    border-radius: 4px;
  }
​
  /* button big 的样式 */
  .my-button.my-button-size-big {
    padding: 12px 20px;
  }
​
  /* button mid 的样式 */
  .my-button.my-button-size-mid {
    padding: 10px 20px;
  }
​
  /* button small 的样式 */
  .my-button.my-button-size-small {
    padding: 10px 10px;
  }
</style>
​

'use strict'
// my-button 中的 index.js
import main from './src/main'
​
export default main

'use strict'
// src 中的 index.js
import MyButton from './components/my-button'
​
const components = [
  MyButton
]
​
// 官方原文：Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
const install = function (Vue) {
  components.forEach(component => {
    // Vue.component：注册或获取全局组件
    Vue.component(component.name, component)
  })
}
​
// 在全局引入组件库时，使用 Vue.use 安装插件，必须提供 install 方法，这里 export default 就是用于 Vue.use
export default {
  install
}

// ...
// 引入开发的组件库，
import MyComponent from '../src'
​
// 使用 Vue.use 安装开发的组件库
Vue.use(MyComponent)
// ...

<template>
  <div class="example-button">
    <my-button @click="clickFunc">
      这是一个按钮
    </my-button>
    <my-button size="mid" @click="clickFunc">
      这是一个按钮
    </my-button>
    <my-button size="small" @click="clickFunc">
      这是一个按钮
    </my-button>
  </div>
</template>
​
<script>
export default {
  name: 'example-button',
  methods: {
    clickFunc () {
      alert('Click')
    }
  }
}
</script>
​
<style scoped>
​
</style>

// ...
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
​
baseWebpackConfig.entry = {}
​
const webpackConfig = merge(baseWebpackConfig, {
  // ...
  devtool: config.publish.productionSourceMap ? '#source-map' : false,
  entry: {
    myComponent: './src/index.js'
  },
  output: {
    path: config.publish.distRoot + '/dist',
    filename: 'index.js',
    publicPath: config.publish.assetsPublicPath,
    library: 'my-component',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
  // ...
})
​
// ...

{
    // ...
    "private": false,
    "main": "dist/index.js",
    "scripts": {
        // ...
        "build:my-component": "node build/publish.js"
        // ...
    }
}