从零到一教你基于vue开发一个组件库

安装vue-cli3并创建一个项目
首先我们先安装开发必要的工具集,并创建一个项目:
yarn global add @vue/cli
// 创建项目
vue create vui
我们安装完依赖并进入项目启动服务后vue-cli3会自动给我们展示一个默认页面,关于vue的组件库目录结构,笔者参考element的来组织,大家也可以按照自己团队的风格来设计.首先我们看看原来的目录结构:

我们做如下调整:

我们将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件. 但是cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提供自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可.我们具体修改如下:
module.exports = {
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
}
}
首先修改入口文件地址为examples下的main.js,其次将packages加入打包编译任务中.

编写组件代码
首先我们拿一个Button组件来示范，这里只实现一个比较简单的组件 vue和react组件设计中会大量应用插槽机制，比如vue里的slot标签， react的children等，所以这一块大家可以重点关注一下。 我们在在Button的index.js里编写如下代码来作为vue的组件安装
// 导入组件，组件必须声明 name
import XButton from './src'

// 为组件提供 install 安装方法，供按需引入
XButton.install = function (Vue) {
Vue.component(XButton.name, XButton)
}
// 导出组件
export default XButton
Button的组件结构如下：

接下来我们在packages的入口文件中导入组件并安装导出：
// 导入button组件
import XButton from './Button'

// 组件列表
const components = [
XButton
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component)) }

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) { install(window.Vue)
}

export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
XButton
}
面的install步骤和导出步骤非常关键，大家需要按照规则配置，这也是vue组件注册的规则之一