扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇内容介绍了“如何从零开始搭建一套ui组件库”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联公司始终坚持【策划先行，效果至上】的经营理念，通过多达10多年累计超上千家客户的网站建设总结了一套系统有效的全网营销推广解决方案，现已广泛运用于各行各业的客户，其中包括：发电机回收等企业，备受客户赞扬。
我们在编写我们组件库的组件前，首先需要一套环境，包括下面几项：
需要为组件库单独创建一个新的项目
需要规划合适的目录结构
需要定义组件文档的编写
我们目前的项目是基于vue2的版本，所以本次组件库项目也将使用 2.0版本的vue cli来创建。
// 全局安装 vue-cli npm install --global vue-cli // 基于 webpack 创建一个的新项目 vue init webpack my-project // 安装依赖 npm install // 运行 npm run dev
安装过程相关选项如下：
我们默认安装jest做为我们组件库的单元测试框架,代码检查工具默认eslint
创建项目成功后，现在我们新项目的目录结构应该是这样的:
build 打包相关目录以及配置
config 配置文件目录
node_modules 项目中安装的依赖模块
src 源码目录
static 静态文件目录
test 单元测试目录
我们需要对现有目录做一些调整，首先我们接触过一些主流的ui组件库比如 vant/ant，我们知道在这些组件库的官网上都提供了很直观的示例页面，此时我们的组件库将src目录改名为examples,作为我们的官方示例目录。
另外我们新增一个packages目录用户存放我们的组件。
现在我们目录结构变成如下：
此时如果重新运行项目会发现报错，因为我们src目录名变了，而webpack配置中默认的入口文件还是src/main.js，我们需要更改下配置，在build/webpack.base.conf文件中将src替换成examples。同时，我们需要将新增的 packages目录加入到webpack的编译队列。
更改后的 webpack.base.conf 应该是这样的。
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('examples'), resolve('packages'),resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './examples/main.js' // 打包入口
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('examples'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('examples'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}重新运行，编译通过。
在搭建完基础的代码环境后，我们要考虑我们新增组件的组件文档如何编写。
我们推荐使用 markdown来编写组件文档,然后我们如何在vue中使用markdown来编写我们的组件文档呢？这里我们推荐一个好用的工具。
vue-markdown-loader
# vue1版本 npm i vue-markdown-loader@0 -D # vue2版本 npm i vue-markdown-loader -D npm i vue-loader vue-template-compiler -D
我们在对webpack.base.conf作如下修改：
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module: {
rules: [
...,
{
test: /.md$/,
use: [
{
loader: 'vue-loader'
},
{
loader: 'vue-markdown-loader/lib/markdown-compiler',
options: {
raw: true
}
}
]
},
...
]
},
plugins: [new VueLoaderPlugin()]在我们配置完工具后，我们开始测试下组件文档的编写，
首先，我们在examples目录下新增一个docs文件夹，用于存放我们的组件文档。
新建一个test.md
# hello world
接下来我们在router文件夹新增一个 docs.js路由文件，用来存放我们组件文档的路径，并将它引入到根路由文件中。
const docs = [
{
path: '/test',
name: 'test',
component: r => require.ensure([], () => r(require('../docs/test.md')))
}
]
export default docs浏览器中运行，我们便可以看到我们组件库的第一个组件文档...
以上完成，我们组件库的环境基本搭建完成了，接下来我们尝试开始写一个新的组件。
我们先从一个基础的button组件开始。
首先我们在之前创建的packages中新增如下结构：
sg-button 组件目录
index.js 组件安装入口程序
src 组件源码
这里我在src/index.vue中简单实现了一个button组件，支持三种大小的按钮，