前言
之所以写这一系列文章，是为了记录自己构建一个组件库的历程，同时也给那些自己想写组件库的同学一个教程。组件库也写了一段时间了，基本的架子也搭建得差不多了，但是回想自己搭建的过程还是不够完善，所以回来整理一遍自己的思路，让自己的技术有个输出。
先看下效果ninecat-ui
组件库源码ninecat-ui（如果觉得还不错，可以给个start哦）
image
image
下面是我在编写这个UI组件库的一些Todolsit
- 自定义文档目录结构
- 通过MD来展示组件demo
- 集成Travis CI
- 集成单元测试
- 集成codecov
- 自动构建组件文档
- 根据tag自动发布npm
- 集成docsearch
- 集成codepen
- 颜色主题自定义
- 国际化多语言
- JavaScript和typescript混合开发
好，那我们就开始吧！
寻找合适的组件库原型
开始写组件库之前，你需要有一个好的原型图。国内比较流行的Element UI和Ant Design都有相应的元件库，如果想练手，完全可以直接那拿来用。
这里提供两个链接可去下载相应的UI组件库资源。
https://element.eleme.cn/2.0/#/zh-CN/resource
https://ant.design/docs/spec/download-cn
我用的是Rsuite的UI组件库，感觉还不错良心团队。
有了原型就可以开始干活了！
npm初始化项目
既然是从零开始搭建一个组件库，那肯定不能用脚手架来搭建了，那就不叫从零开始了，所有我们直接npm init开始项目。
mkdir ninecat-ui
cd ninecat-ui
npm init
image
到这里项目初始化算成功了，下面来装一下必要的依赖。
安装依赖
依据我安装依赖的经验，把依赖分为这几种：核心依赖、构建依赖、工具依赖。当然这是我按照功能性去区分的，更专业的分类请看 https://zhuanlan.zhihu.com/p/29855253
这里我们用yarn来安装依赖。现在安装依赖先不区分哪种依赖类型，直接yarn add就行，等后面架子搭建好了再来区分属于那类依赖，然后重构一下package.json文件，关于package.json更加详细的文档可以参考 https://docs.npmjs.com/files/package.json
一个基本的VUE项目大概需要这些依赖：
vue、webpack、webpack-cli、webpack-dev-server、@babel/core、babel-loader、css-loader、html-webpack-plugin、vue-loader
、vue-template-compiler
Hello World
依赖装好了，我们来定义一下项目html模版，入口文件和VUE主页文件，根目录新建index.html,新建src目录，src下新建一个index.js和index.vue。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ninecat-ui</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.vue
<template>
<div>Hello Ninecat-ui</div>
</template>
<script>
export default {
name:'App'
}
</script>
index.js
import Vue from 'vue'
import App from './index.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
内容好了，现在需要简单的配置一下webpack让项目运行起来。
在跟目录下新建一个build目录，里面新增一个webpack配置文件webpack.config.base.js
'use strict'
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, '../src/index.js'),
output: {
path: path.resolve(__dirname, '../dist'),
filename: "index.js"
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
}),
new VueLoaderPlugin(),
]
}
如果有同学还不懂这些基本的配置，应该去翻一下webpack的官方文档了哦，给出链接：https://www.webpackjs.com/
进行如上配置，一个基本的VUE项目就搭建差不多了，然后我们需要配置一下项目的启动脚本。在package.json里面scripts下进行如下配置：
"scripts": {
"start": "webpack-dev-server --config build/webpack.config.base.js"
},
最后来看一下我们的项目目录结构：
image
然后运行一下我们的项目：yarn start
image
OK，到这里基本的一个vue项目搭建好了，我们后面就可以开始构建组件了。
第一节源码在ninecat-ui/ninecat-train tag1.0.0
下一章：
从零构建一个Vue UI组件库（二）
网友评论