专栏首页与前端沾边[day-ui]基于 vue3.0 从 0-1 搭建组件库 - 环境搭建
原创

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

初衷

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

day-ui

目前就简单写了两个组件,样式没有自己写,使用的 element-plusscss 文件。内部逻辑都是参考一点点写的,更好的理解组建的实现和 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.jsApp.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-pagesroot 根目录,所以把 dist 下的文件传到 gh-pages 分支即可。

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

NICE!!!

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

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (八) 组件库打包环境配置

    no-clean表示打包时不删除build文件夹(https://cli.vuejs.org/zh/config/#outputdir) 作用就是为了后边的按需...

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (一) 环境配置与目录规划

    使用vue-cli搭建项目框架,需要用vue3的话,得先把vue-cli的版本升级到vue-cli@4.5以上

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (十) 组件发布到NPM

    本来需要配置.npmignore配置文件,但是网上不建议用这种方式,说是黑名单的方式,不在黑名单里的关键信息都发上去了。 而是建议使用package.json...

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (五) 组件包入口文件

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (二) 库初始化配置

    在项目根目录下,执行下行代码,将vue的默认配置与自己的配置结合导出到outputjs

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (三) Button示例组件设计

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (七) 组件文档平台雏形

    没有vuepress的主题多、也没有他的功能多,基本的功能等需要自己手动配置。 新玩意儿,贵在体验

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (四) 全局样式整理

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (九) 单元测试配置

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (六) 项目注册与包引入

    xing.org1^
  • 【xingorg1-ui】基于vue3.0从0-1搭建组件库 (十一) 持续集成与持续部署(CI/CD)

    配置release.sh文件 build下新建release.sh文件,配置如下:

    xing.org1^
  • 使用vue3.0和element实现后台管理模板

    通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存放,一种是直接存储到m...

    小周sri的码农
  • 使用Vue3.0,我收获了哪些知识点(一)

    近期工作感觉很忙,都没有多少时间去写文章,今天这篇文章主要是将自己前期学习Vue3.0时候整理的一些笔记内容进行了汇总,通过对本文的阅读,你将可以自己完成Vue...

    用户1308196
  • 从0到1搭建自己的组件(vue-code-view)库(下)

    书接上文,本文将从源码功能方面讲解下 vue-code-view 组件核心逻辑,您可以了解以下内容:

    玖柒的小窝
  • vue3.0 Composition API 上手初体验 构建基本项目开发环境

    目前,vue3.0 已经进入了 beta 版本了。众多的特性已经定下来了,相信有不少朋友都已经开始阅读相关的资料或源码了。

    FungLeo
  • 数据仓库组件:Hive环境搭建和基础用法

    Hive是基于Hadoop的一个数据仓库工具,用来进行数据提取、转化、加载,是一个可以对Hadoop中的大规模存储的数据进行查询和分析存储的组件,Hive数据仓...

    知了一笑
  • Vue3发布半年我不学,摸鱼爽歪歪,哎~就是玩儿

    是从 Vue 2 开始学基础还是直接学 Vue 3 ?尤雨溪给出的答案是:“直接学 Vue 3 就行了,基础概念是一模一样的。”

    程序员十三
  • 使用Vue3.0,我收获了哪些知识点(二)

    最近在工作之余一直学习Vue3.0相关知识,虽然Vue3.0至今还是rc版,但这并不影响我们去学习。今天这篇文章是我关于Vue3.0的第四篇文章。在前文中我们讲...

    用户1308196
  • [day-ui]DButton 组件和 DIcon 组件实现

    上一篇中我们已经把组件的基础架构和文档的雏形搭建好了。下面我们从最简单的 button 和 icon 组件入手,熟悉下 vue3 的语法结构和组件的单元测试。看...

    测不准

扫码关注云+社区

领取腾讯云代金券