如何使用vue写一个组件库
新建vue项目
使用vue-cli初始化一个项目：
vue init webpack VueComponentcd VueComponentnpm installnpm run dev
以上就新建好了一个vue项目
项目目录
首先，定义好目录，经过观察大多数的组件库，基本是这样的目录：
|-- examples // 用于demo展示|-- packages // 用于编写存放组件
因为修改了目录名称,就需要修改下webpack的配置文件，修改编辑目录
build/webpack.bash.config.js{ test: /\.js$/, loader: 'babel-loader', include: [resolve('examples'), resolve('test'), resolve('node_modules/webpack-dev-server/client'),resolve('packages')]} 将编译目录指向examples和packages。
写一个组件
在packages下面创建一个Button组件，目录如下(目录构建都是参照ele-ui)
|-- examples |-- packages | |--Button| |--src| | |--main.vue // 编写组件内容| |-- index.js // 导出组件
main.vue内容：
index.js内容：
import Button from './src/main.vue';// 在每个组件下面定义一个install方法。Button.install = function (Vue) { Vue.component(Button.name, Button);};export default Button; 到此，就完成了一个组件的简单编写
导出组件
组件写好之后，需要让组件支持全局引入和按需引，在packages下面新建一个index.js文件，用于将组件导出
代码：import Button from './button/index.js'; // 引入组件const components = [ Button];//'vue-use是调用的install方法'const install = function(Vue) { if (install.installed) return; components.map(component => Vue.component(component.name, component));};if (typeof window !== 'undefined' && window.Vue) { console.log('传入参数install方法') install(window.Vue);}export default { install, // 如果在外面使用vue.use的话，就会默认使用install方法 Button}; 这里为什么要定义一个install方法呢？看下vue源码
import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plugin: Function | Object) { const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) if (installedPlugins.indexOf(plugin) > -1) { return this } // additional parameters const args = toArray(arguments, 1) args.unshift(this) ⚠️ if (typeof plugin.install === 'function') { ⚠️ plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this }} 由此可见，vue.use是调用传入的组件的instll方法。这也就解释了，为什么每个组件都定义了一个install方法。
使用组件
在examples的main.js里面引入组件：
import MVUI from '../packages/index'Vue.use(MVUI)
到此，一个非常简单的组件就写好了。