基于vue开发一个组件库

如果团队存在多个不同的项目都会使用一致的组件设计规范,那么搭建组件库无疑是不二选择.接下来我们直接开始实现组件库的搭建.

1.首先安装vue-cli3并创建一个项目

// 创建项目
vue create tset

关于vue的组件库目录结构,首先我们看看原来的目录结构如下:

我们做一下调整:

将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件. 但是cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提供自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可.我们具体修改如下:

module.exports = {lintOnSave: false,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加入打包编译任务中.

2.编写组件

拿一个Button组件来示范，这里只实现一个比较简单的组件。首先我们先在packages目录下新建一个Button目录，然后src里的index.vue存放组件的源代码：

<template><div class="y-button"><slot></slot></div>
</template><script>
export default {name: 'y-button',props: {type: String}
}
</script><style scoped>.y-button {display: inline-block;padding: 4px 8px;background: #000;color: #fff;}
</style>

我们在在Button的index.js里编写如下代码来作为vue的组件安装：

// 导入组件，组件必须声明 name
import YButton from './src'// 为组件提供 install 安装方法，供按需引入
YButton.install = function (Vue) {Vue.component(YButton.name, YButton)
}// 导出组件
export default YButton

Button的组件结构如下

接下来我们在packages的入口文件index.js中导入组件并安装导出：

// 导入button组件
import YButton from './Button'// 组件列表
const components = [YButton
]// 定义 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,// 以下是具体的组件列表YButton
}

这是vue组件注册的规则之一。详细文档大家可以看vue官网的组件篇。

3.测试代码

将组件导入到examples目录下的main.js中，其本质就是一个项目的开发目录，我们只需要按照如下方式导入即可：

// examples/main.js// 导入组件库
import yui from '../packages'
// // 注册组件库
Vue.use(yui)

这种方式是全局导入，至于按需导入，完全可以采用element的方式来配置，对于业务组件来说，一般项目中都是使用的到，所以全局导入比较合适，作为UI库来说，按需导入可能更适合。

接下来我们就可以在项目中使用我们的组件了：

效果如下：

4.配置package.json文件

作为一个组件库,我们必须按照npm的发包规则来编写我们的package.json, 我们先来解决组件库打包的问题,首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下，修改script脚本,代码如下:

  "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service build --target lib --name yui --dest lib packages/index.js"},

我们的lib脚本就是用来打包packages的组件代码到lib目录下,文件名为以–name指定的名称前缀开头,我们执行脚本会输出类似如下代码:

5.发布到npm

// 本地编译组件库代码yarn lib
// 登录npm login// 发布npm publish// 如果发布失败提示权限问题,请执行以下命令npm publish --access public

发布之后效果如下:

之后我们就可以通过如下方式使用了:

import yui from 'ytestnpm/packages'
import 'ytestnpm/lib/yui.css'Vue.use(yui)

第一次注册发布到npm可能会出错403，可能是没有验证邮箱，如果验证邮箱了，那么可以看看package.json的name值，有可能是名称和仓库里重名了。