Vue3移动端组件库Varlet源码主题阅读之一:本地启动服务时都做了什么

简介: 不同的组件库架构肯定有所不同,不过大体思路应该都差不多,笔者在众多组件库中挑选了[Varlet](https://github.com/varletjs/varlet) 来进行剖析,`Varlet`是一个基于 `Vue3` 开发的 `Material` 风格的移动端组件库,本系列的文章会全面解析这个项目,需要说明的是,不会具体的看某个组件是怎么实现的,而是了解组件库整体的设计,以及按需引入、主题定制、屏幕适配、组件打包、`VsCode`属性高亮等比较有意思的话题,话不多说,开始吧。
本文为 Varlet组件库源码主题阅读系列第一篇

Vue开源的组件库有很多,基本各个大厂都会做一个,所以作为个人再重复造轮子其实意义也不是很大,但是笔者对于如何设计一个Vue组件库还是挺感兴趣的。

不同的组件库架构肯定有所不同,不过大体思路应该都差不多,笔者在众多组件库中挑选了Varlet 来进行剖析,Varlet是一个基于 Vue3 开发的 Material 风格的移动端组件库,本系列的文章会全面解析这个项目,需要说明的是,不会具体的看某个组件是怎么实现的,而是了解组件库整体的设计,以及按需引入、主题定制、屏幕适配、组件打包、VsCode属性高亮等比较有意思的话题,话不多说,开始吧。

Varlet 版本为:1.27.20

项目结构

先克隆Varlet的项目:

git clone https://github.com/varletjs/varlet.git

初始结构如下:

packages目录下存在很多单独的包,我们后面都会进行介绍。

本地开发

根据官方文档的描述,我们可以使用下面的命令进行本地开发:

Varlet使用的包管理器是pnpmpnpm是一个速度快、节省磁盘空间的软件包管理器,如果没安装的话需要先安装一下:

npm install -g pnpm

bootstrap命令如下:

pnpm install && node scripts/bootstrap.mjs

先安装依赖,然后执行bootstrap.mjs文件:

// bootstrap.mjs
import { buildCli, buildIcons, buildShared, buildUI, runTask } from './build.mjs'

;(async () => {
  await runTask('shared', buildShared)
  await Promise.all([runTask('cli', buildCli), runTask('icons', buildIcons)])
  await runTask('ui', buildUI)
})()

运行了一波任务,挨个来看,先看runTask方法:

// build.mjs
import ora from 'ora'

export async function runTask(taskName, task) {
  const s = ora().start(`Building ${taskName}`)
  try {
    await task()
    s.succeed(`Build ${taskName} completed!`)
  } catch (e) {
    s.fail(`Build ${taskName} failed!`)
    console.error(e.toString())
  }
}

ora是一个命令行的loading工具,可以在终端显示好看的loading效果,然后就是执行传入的任务函数。

  • shared任务:
// build.mjs
import execa from 'execa'
import { resolve } from 'path'

const CWD = process.cwd()// 获取nodejs进程的当前工作目录,也就是项目的根目录
const PKG_SHARED = resolve(CWD, './packages/varlet-shared')// varlet-shared包的绝对路径
export const buildShared = () => execa('pnpm', ['build'], { cwd: PKG_SHARED })

execanodejschild_process的改进版本,返回的是一个Promisepnpm运行命令可以省略run,直接pnpm build即可,所以上述这个任务就是在varlet-shared包的目录下执行build命令:

tsc && tsc -p tsconfig.cjs.json

使用两个配置文件执行了两次tsc,也就是将src目录下的ts文件分别编译成了es模块和commonjs模块:

  • cli任务:
// build.mjs

const PKG_CLI = resolve(CWD, './packages/varlet-cli')
export const buildCli = () => execa('pnpm', ['build'], { cwd: PKG_CLI })

varlet-cli目录下执行build命令:

tsc

同样也是编译ts,这个包的入口为./lib/index.js,未编译前lib目录下只有这一个文件,显然其他文件都是缺失的:

需要先编译才能使用这个包,编译后结果如下:

  • icons任务:
// build.mjs

const PKG_ICONS = resolve(CWD, './packages/varlet-icons')
export const buildIcons = () => execa('pnpm', ['build'], { cwd: PKG_ICONS })

进入varlet-icons目录下运行build命令:

varlet-icons build

varlet-icons命令的执行文件为同目录下的varlet-icons/lib/index.js,详细逻辑我们后面再说,先看一下运行结果:

其实就是将svg文件编译成字体图标。

  • ui任务:
// build.mjs

const PKG_UI = resolve(CWD, './packages/varlet-ui')
export const buildUI = (noUmd) => execa('pnpm', ['compile', noUmd ? '--noUmd' : ''], { cwd: PKG_UI })

进入varlet-ui目录下执行compile命令,和前面几个任务不同,这个任务会接收一个参数,顾名思义,是否不要生成umd,但是我搜索了一下并没有找到有传true的情况:

compile命令如下:

varlet-cli compile

该命令的作用是打包varlet的组件,具体实现逻辑后面再看,先看一下运行结果:

主要是编译组件,有三种产物:es模块、commonjs模块、umd模块。

启动前的任务都运行完了,接下来就可以进入varlet-ui目录启动服务了,启动命令pnpm dev

varlet-cli dev

这个命令做的事情比较多,我们后面再详解,大体上呢会把varlet-cli目录下的site目录复制到varket-ui目录下,并且动态生成两个路由文件:mobile.routes.tspc.routes.ts

访问启动的页面:

报错了,原因很简单,笔者是Windows电脑,路径的分隔符是反斜杠,所以生成的部分路径\没有转换成/,而\.varlet组合起来会被认为是转义字符:

查看源码发现虽然已经使用了slash来转换Windows平台下的路径问题,但是不知道为啥没有生效:

没办法,只能手动修复一下,我们使用下面这种方法来转换:

import path from 'path'
xxx.split(path.sep).join('/')

修改完以后文档页面示例显示出来了:

右边手机模拟器里的组件导入的是varlet-ui/src/xxx目录下的,也就是开发目录下的组件,所以我们直接修改就可以在页面上查看效果了。

项目的本地启动部分就到这里,我们下篇再见~

相关文章
|
13天前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
155 11
|
5月前
|
缓存 JavaScript PHP
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
751 5
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
273 1
|
2月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
149 0
|
3月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
99 0
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件的实现代码:支持自定义表情库、快捷键发送和输入框联动的聊天表情解决方案
本文详细介绍了在 Vue 项目中实现一个功能完善、交互友好的表情包输入组件的方法,并提供了具体的应用实例。组件设计包含表情分类展示、响应式布局、与输入框的交互及样式定制等功能。通过核心技术实现,如将表情插入输入框光标位置和点击外部关闭选择器,确保用户体验流畅。同时探讨了性能优化策略,如懒加载和虚拟滚动,以及扩展性方案,如自定义主题和国际化支持。最终,展示了如何在聊天界面中集成该组件,为用户提供丰富的表情输入体验。
330 8
|
5月前
|
JavaScript API 容器
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
423 17
|
5月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1509 0
|
16天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
136 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
573 0