前言
之所以寫這一系列文章妖枚，是為了記錄自己構(gòu)建一個(gè)組件庫的歷程运提，同時(shí)也給那些自己想寫組件庫的同學(xué)一個(gè)教程鳍寂。組件庫也寫了一段時(shí)間了改含，基本的架子也搭建得差不多了，但是回想自己搭建的過程還是不夠完善迄汛，所以回來整理一遍自己的思路捍壤，讓自己的技術(shù)有個(gè)輸出。
先看下效果ninecat-ui
組件庫源碼ninecat-ui（如果覺得還不錯(cuò)鞍爱，可以給個(gè)start哦）
下面是我在編寫這個(gè)UI組件庫的一些Todolsit
- 自定義文檔目錄結(jié)構(gòu)
- 通過MD來展示組件demo
- 集成Travis CI
- 集成單元測試
- 集成codecov
- 自動(dòng)構(gòu)建組件文檔
- 根據(jù)tag自動(dòng)發(fā)布npm
- 集成docsearch
- 集成codepen
- 顏色主題自定義
- 國際化多語言
- JavaScript和typescript混合開發(fā)
好鹃觉，那我們就開始吧！
尋找合適的組件庫原型
開始寫組件庫之前睹逃，你需要有一個(gè)好的原型圖盗扇。國內(nèi)比較流行的Element UI和Ant Design都有相應(yīng)的元件庫，如果想練手沉填，完全可以直接那拿來用疗隶。
這里提供兩個(gè)鏈接可去下載相應(yīng)的UI組件庫資源。
https://element.eleme.cn/2.0/#/zh-CN/resource
https://ant.design/docs/spec/download-cn
我用的是Rsuite的UI組件庫翼闹，感覺還不錯(cuò)良心團(tuán)隊(duì)斑鼻。
有了原型就可以開始干活了！
npm初始化項(xiàng)目
既然是從零開始搭建一個(gè)組件庫猎荠，那肯定不能用腳手架來搭建了坚弱，那就不叫從零開始了，所有我們直接npm init開始項(xiàng)目法牲。
mkdir ninecat-ui
cd ninecat-ui
npm init
到這里項(xiàng)目初始化算成功了，下面來裝一下必要的依賴琼掠。
安裝依賴
依據(jù)我安裝依賴的經(jīng)驗(yàn)拒垃，把依賴分為這幾種：核心依賴、構(gòu)建依賴瓷蛙、工具依賴悼瓮。當(dāng)然這是我按照功能性去區(qū)分的，更專業(yè)的分類請看 https://zhuanlan.zhihu.com/p/29855253
這里我們用yarn來安裝依賴〖桠現(xiàn)在安裝依賴先不區(qū)分哪種依賴類型横堡，直接yarn add就行，等后面架子搭建好了再來區(qū)分屬于那類依賴冠桃，然后重構(gòu)一下package.json文件命贴，關(guān)于package.json更加詳細(xì)的文檔可以參考 https://docs.npmjs.com/files/package.json
一個(gè)基本的VUE項(xiàng)目大概需要這些依賴：
vue、webpack、webpack-cli胸蛛、webpack-dev-server污茵、@babel/core、babel-loader葬项、css-loader泞当、html-webpack-plugin、vue-loader
民珍、vue-template-compiler
Hello World
依賴裝好了襟士，我們來定義一下項(xiàng)目html模版，入口文件和VUE主頁文件嚷量，根目錄新建index.html,新建src目錄陋桂，src下新建一個(gè)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')
內(nèi)容好了津肛，現(xiàn)在需要簡單的配置一下webpack讓項(xiàng)目運(yùn)行起來章喉。
在跟目錄下新建一個(gè)build目錄，里面新增一個(gè)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(),
]
}
如果有同學(xué)還不懂這些基本的配置身坐，應(yīng)該去翻一下webpack的官方文檔了哦秸脱，給出鏈接：https://www.webpackjs.com/
進(jìn)行如上配置，一個(gè)基本的VUE項(xiàng)目就搭建差不多了部蛇，然后我們需要配置一下項(xiàng)目的啟動(dòng)腳本摊唇。在package.json里面scripts下進(jìn)行如下配置：
"scripts": {
"start": "webpack-dev-server --config build/webpack.config.base.js"
},
最后來看一下我們的項(xiàng)目目錄結(jié)構(gòu)：
然后運(yùn)行一下我們的項(xiàng)目：yarn start
OK，到這里基本的一個(gè)vue項(xiàng)目搭建好了涯鲁，我們后面就可以開始構(gòu)建組件了巷查。
第一節(jié)源碼在ninecat-ui/ninecat-train tag1.0.0
