[day-ui]基于 vue3.0 从 0-1 搭建组件库 - 环境搭建

初衷

其实之前使用 vue2 的时候就想写个开源组件库，学习交流使用。如果公司有自己的需求也可以快速上手。开始想的是能在网上找到好的教程，环境搭建 - 组件编写 - 单元测试 - 文档编写 - 打包发布，但是没有很完善的，慕课网有个 react 组件库的教程，storybook 编写文档的，vue3 的有个组件库教程是写配置表单的。实在网上找不到资料了，没办法就自己写嘛，没有困难制造困难也要上。网上也是找了一些资料指导，再配合开源的 element-plus 和 element3 组件库，想把自己的学习经验和大家分享下，不一定全对，也会有一些问题，主要是和大家一起学习，大家有什么好的意见我也会融合进来，对自己也是提升。

day-ui

目前就简单写了两个组件，样式没有自己写，使用的 element-plus 的 scss 文件。内部逻辑都是参考一点点写的，更好的理解组建的实现和 vue3 的语法，因为我在公司英文名叫 day，就叫 day-ui 了。

npm（不知道为什么会有下载量😂，我的名难道误导别人了？）

github地址

文档github地址

文档在线访问

如果您感兴趣的话，欢迎给个 star 关注哈，后面计划把每个组件的实现原理都写出来，知其所以然。

环境搭建

我们直接使用 vue-cli 搭建项目框架，因为要用到 vue3 ，得先把 vue-cli 的版本升级到 vue-cli@4.5 以上。

npm install -g @vue/cli

创建新项目

vue create xxx

为什么使用dart-scss

按照提示可以启动项目，如果报依赖问题，可以删除 node_modules，重新安装

配置 prettier

在项目根目录创建 .prettierrc.json 文件

{
  "singleQuote": true, // 使用单引号
  "semi": false, // 不用分号
  "trailingComma": "none" // 最后一个元素不加逗号
}

我们打开 vscode 的设置，配置保存格式化。如果想 vscode 所有项目都有这个功能，可以选用户，我这里选择工作区，当前项目，不影响其他项目结构格式化

根目录会创建一个 .vscode/setting.json 文件,

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode" // 添加
}

如果发现有如下异常：

参考文章

环境搭建

1. 我们不是做 vue 项目，可以把 src 目录删除，创建 examples 目录，用来测试写的组件；创建 packages 目录存放我们自己写的组件。

main.js 和 App.vue 代码和之前 src 目录下的一致

1. 根目录新建 vue.config.js 修改配置const path = require('path') const join = path.join function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { pages: { index: { entry: 'examples/main.js', // 运行入口 template: 'public/index.html', filename: 'index.html' } }, configureWebpack: { resolve: { extensions: ['.js', '.vue', '.json'], alias: { packages: resolve('packages'), assets: resolve('examples/assets'), views: resolve('examples/views') } } }, chainWebpack: (config) => { config.module.rule('js').include.add('/packages').end() } }npm run sreve 正常启动项目 3. 引入全局样式文件 可以直接把 element-plus 的项目下载下来，样式文件放在 element-plus/packages/theme-chalk/src/ 目录下。在根目录创建 styles 目录，把样式文件拷贝进去。

因为我们组件库叫 day-ui，所以样式文件也是使用 d- 开头，修改 styles/mixins/config.scss

$namespace: 'd';
...

得到的目录结构如下：

- examples
   - example // 组件使用demo
      - button.vue
   - App.vue
   - main.js
- packages // 组件包源码
   - button
      - __tests__ 组件的单元测试
         - button.spec.js
      - src
         - index.vue
      - index.js // 单组件入口
   - index.js // 入口
- styles // 组件样式
- typings // 组件的类型

文档初始化

开始想使用 vitepress 搭建文档，在 GitHub 找到了现成的脚手架工具 vitepress-for-component，地址, 大家也可以直接看官网快速上手

1. 安装脚手架yarn create vlibnpm i 或者 yarn可能遇到以下问题
   
   可能作者的开发平台不同，当然这个包对项目的启动，打包没有影响，所以我们可以忽略，在依赖中删除，在执行安装。
2. 安装依赖
3. 启动项目
   
4. 使用 github 访问 在 github 上创建一个和文档项目名一致的仓库名，会有静态资源访问
   
   把文档项目上传
   
   仓库中找到 settings 菜单找到如下：
   
   我们直接点击 choose a theme 选中随便一个主题，github 会自动创建 gh-pages 分支
   
   配置网站
   
   前面的换成你自己的名字，格式是 name.github.io/仓库名
   
   点击网址成功打开
   
5. 部署文档 打包npm run docs-build，生成的文件在 docs/dist 中

因为我们配置的访问 gh-pages 的 root 根目录，所以把 dist 下的文件传到 gh-pages 分支即可。

切换分支 git checkout gh-pages。把 dist 下的内容都放到根目录下，创建 .gitingore 文件不用的写上，上传

NICE!!!

1. 提供了两个文件目录，也可以打包后直接放到 docs 里面，直接访问，不用移动文件，build 打包的时候改下地址
   

下一篇我们先写下简单的 button， icon 组件，快速的学习 vue3 的语法和打包配置，如果有问题的话欢迎指正!

如果文章对你有帮助，欢迎分享到朋友圈！谢谢阅读！