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

前言 之所以写这一系列文章，是为了记录自己构建一个组件库的历程，同时也给那些自己想写组件库的同学一个教程。组件库也写了一段时间了，基本的架子也搭建得差不多了，但是回想自己搭建的过程还是不够完善，所以回来整理一遍自己的思路，让自己的技术有个输出。 先看下效果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 index.vue 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组件库（二）

本文章由javascript技术分享原创和收集