前言

之所以写这一系列文章，是为了记录自己构建一个组件库的历程，同时也给那些自己想写组件库的同学一个教程。组件库也写了一段时间了，基本的架子也搭建得差不多了，但是回想自己搭建的过程还是不够完善，所以回来整理一遍自己的思路，让自己的技术有个输出。

先看下效果ninecat-ui

组件库源码ninecat-ui（如果觉得还不错，可以给个start哦）

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组件库（二）

从零构建一个Vue UI组件库（一）

从零构建一个Vue UI组件库（一）

前言

寻找合适的组件库原型

npm初始化项目

安装依赖

Hello World

推荐阅读更多精彩内容