前文已经初始化了 workspace-root,从本文开始就需要依次搭建组件库、example、文档、cli。本文内容是搭建 组件库的开发环境。

1 packages 目录

前面在项目根目录下创建了 packages 目录,该目录存放组件库的所有组件组件库的入口。该目录中已经创建了两个子目录 fooyyg-demo-ui。这两个目录是干嘛用的呢?

1.1 foo 目录

foo 目录代表一个示例组件,后面咱们会使用该组件来测试组件库在 example 和组件库文档中是否能正常运行。后续要开发的所有组件(如高级卡片组件、JSON Schema 表单组件等)都与 foo 组件的文件目录结构保持一致。

1.2 yyg-demo-ui 目录

该目录与整个组件库工程的名称相同,所以你本地的这个目录不一定叫这个名称。该目录是组件库的入口模块,该模块会安装组件库的所有组件(即 packages 目录下的其他包)作为依赖,并引入全部组件,统一暴露。此外还是打包组件库的入口。可以将它理解为组件库的聚合模块。

2 实现 foo 示例组件

2.1 初始化 package.json

foo 目录存放示例组件,它也是一个包,所以需要在命令行中进入 packages/foo 目录,使用 pnpm 初始化:

pnpm init

修改生成的 package.json 中的 name 属性值为 foo,在 monorepo 中,子包的 name 属性通常会命名为 @组织名/foo,由于咱是个组件库,可以将其命名为 @组件库名/foo,即 @yyg-demo-ui/foo。我修改了 package.json 的下面几个属性:

{
"name": "@yyg-demo-ui/foo",
"version": "1.0.0",
"description": "示例组件",
"author": "程序员优雅哥 youyacoder",
"main": "index.ts",
...
}

2.2 初始化 foo 目录结构

在命令行中进入 foo 目录:

  1. 创建 index.ts 文件,该文件为组件的入口文件:
touch index.ts
  1. 创建 src 目录,该目录存放组件的实现源码。在 foo/src/ 中创建 index.tsxtypes.ts,前者是组件的具体实现,后者是组件的 props 定义及类型:
mkdir src
touch src/index.tsx src/types.ts

如此一来,示例组件 foo 的目录结构便创建完成,目录结构如下:

packages/
|- foo/
|- index.ts
|- src/
|- index.ts
|- types.ts
|- yyg-demo-ui/

2.3 定义 foo 组件的 props

foo/src/types.ts 中定义 foo 组件的 props,并提取其类型:

import { ExtractPropTypes } from 'vue'

export const fooProps = {
msg: {
type: String,
required: false,
default: ''
}
} export type FooProps = ExtractPropTypes<typeof fooProps>

上面的代码定义了一个非必填的属性 msg,并使用 vue 中提供的 ExtractPropTypes 提取 props 的类型。

2.4 实现 foo 组件

foo/src/index.tsx 中实现 foo 组件:

import { defineComponent } from 'vue'
import { fooProps } from './types' const NAME = 'yyg-foo' export default defineComponent({
name: NAME,
props: fooProps,
setup (props, context) {
console.log(props, context)
const onBtnClick = () => {
console.log('点击按钮测试', props.msg)
}
return () => (
<div class={NAME}>
<h1>yyg-demo-ui Foo</h1>
<p class={NAME + '__description'}>msg is: { props.msg }</p>
<el-button type='primary' onClick={onBtnClick}>点击我</el-button>
</div>
)
}
})

该组件仅简单展示文本和 Element Plus 的按钮,用于测试。

2.5 定义 foo 组件入口文件

foo/index.ts

import { App } from 'vue'
import Foo from './src' Foo.install = (app: App) => {
app.component(Foo.name, Foo)
} export default Foo

该文件将组件导入并导出,并且为该组件提供 install 方法。这样便完成了 foo 组件的代码编写。

3 实现 yyg-demo-ui

完成 foo 示例组件后,就需要开始开发组件库入口 yyg-demo-ui 了。第一步仍是初始化 package.json

3.1 初始化 package.json

在命令行中进入 packages/yyg-demo-ui 目录:

pnpm init

同上修改生成的 package.json 文件的 name 属性:

{
"name": "@yyg-demo-ui/yyg-demo-ui",
"version": "1.0.0",
"description": "组件库入口",
"author": "程序员优雅哥 youyacoder",
"main": "index.ts",
...
}

3.2 安装依赖

fooyyg-demo-ui 都是独立的包,yyg-demo-ui 需要安装 foo 到依赖中,才能引入 foo 组件。在 2.1 中将 foopackage.json name 属性修改为 @yyg-demo-ui/foo,安装时要使用该名称。从控制台中进入 packages/yyg-demo-ui ,执行命令:

pnpm install @yyg-demo-ui/foo

此时查看 packages/yyg-demo-ui/package.jsondependencies,会看到使用 workspace协议依赖了 foo

"dependencies": {
"@yyg-demo-ui/foo": "workspace:^1.0.0"
}

同时在 node_modules 中也可以看到多了一个 @yyg-demo-ui/foo

3.3 定义入口文件

packages/yyg-demo-ui 下创建 index.ts,导入组件并导出:

import { App } from 'vue'
import Foo from '@yyg-demo-ui/foo'
// import component end
import '../scss/index.scss' const components = [
Foo
] // components // 全局动态添加组件
const install = (app: App): void => {
components.forEach(component => {
app.component(component.name, component)
})
} export default {
install
}

到这里咱们基本完成了组件的开发环境搭建,但遗留了三个问题:

  1. 组件及组件库的样式定义
  2. 如何查看组件的效果
  3. 组件库如何构建打包发布

这些问题在后面的文章中会依次解答。下一篇文章将分享组件库的 CSS 架构和 example 搭建。

感谢你阅读本文,如果本文给了你一点点帮助或者启发,还请三连支持一下,点赞、关注、收藏,程序员优雅哥会持续与大家分享更多干货

Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境的更多相关文章

  1. Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo

    前两篇文章分享了基于 vite3 vue3 的组件库基础工程 vue3-component-library-archetype 和用于快速创建该工程的工具 yyg-cli,但在中大型的企业级项目中,通 ...

  2. Vue3 企业级优雅实战 - 组件库框架 - 2 初始化 workspace-root

    上文已经搭建了 pnpm + monorepo 的基础环境,本文对 workspace-root 进行初始化配置,包括:通用配置文件.公共依赖.ESLint. 1 通用配置文件 在项目 根目录 下添加 ...

  3. Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构

    在前一篇文章中分享了搭建组件库的基本开发环境.创建了 foo 组件模块和组件库入口模块,本文分享组件库的样式架构设计. 1 常见的 CSS 架构模式 常见的 CSS 架构模式有很多:OOCSS.ACS ...

  4. Newbe.Claptrap 框架入门,第一步 —— 开发环境准备

    Newbe.Claptrap 框架依托于一些关键性的基础组件和一些可选的辅助组件.本篇我们来介绍一下如何准备一个开发环境. Newbe.Claptrap 是一个用于轻松应对并发问题的分布式开发框架.如 ...

  5. Vue企业级优雅实战-00-开篇

    从2018.1.开始参与了多个企业的中台建设,这些中台的技术选型几乎都是基于 Spring Cloud 微服务架构 + 基于 Vue 全家桶的前端.我前后端架构及开发我几乎各占一半的精力,在企业级前端 ...

  6. Vue企业级优雅实战03-准备工作04-全局设置

    本文包括如下几个部分: 初始化环境变量文件 JS 配置文件初始化:如是否开启 Mock 数据.加载本地菜单.URL 请求路径等: 国际化文件初始化:初始化国际化文件的结构: 整合 Element UI ...

  7. Win10系统下搭建Go lang开发环境更换国内源并且体验宇宙最快框架Iris

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_156 最近有同学开始尝试接触Go lang,拥抱新技术永远都会是一个好习惯,之前的一篇文章介绍了如何在Mac os系统下配置Go ...

  8. SDL 开发实战(一):SDL介绍及开发环境配置

    一.什么是SDL? SDL是 “Simple DirectMedia Layer”的缩写,SDL是一个开源的跨平台的多媒体库,封装了复杂的音视频底层操作,简化了音视频处理的难度. SDL使用C语言写成 ...

  9. Vue企业级优雅实战04-组件开发01-SVG图标组件

    (后续的文章 公众号会提前一周更新,欢迎关注文末的微信公众号:程序员搞艺术) 预览本文的实现效果: # gitee git clone git@gitee.com:cloudyly/dscloudy- ...

随机推荐

  1. 1.6_HTML基础属性

    name 属性 name 属性用于指定标签元素的名称. <a> 标签内必须提供 href 或 name 属性. <a name="value"> id 属性 ...

  2. Java开发学习(二十七)----SpringMVC之Rest风格解析及快速开发

    一.REST简介 REST(Representational State Transfer),表现形式状态转换,它是一种软件架构风格 当我们想表示一个网络资源的时候,可以使用两种方式: 传统风格资源描 ...

  3. 究竟什么是Shadow DOM?

    shadow dom 是什么? 顾名思义,shadow dom直译的话就是影子dom,但我更愿把它理解为DOM中的DOM.因为他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文 ...

  4. MySQL Workbench生成E-R图

    因为做毕业设计文档,需要写ER图,故记录此篇 第一步 选择添加 选择数据库 一直next选择要生成的表 再一直下一步就ok了

  5. x64dbg 插件开发环境配置

    x64dbg 是一款开源的应用层反汇编调试器,旨在对没有源代码的可执行文件进行恶意软件分析和逆向工程,同时 x64dbg 还允许用户开发插件来扩展功能,插件开发环境的配置非常简单,如下将简单介绍x64 ...

  6. 大家都能看得懂的源码之ahooks useInfiniteScroll

    本文是深入浅出 ahooks 源码系列文章的第十七篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 简介 useInfiniteScroll 封装了常见的无限滚动逻 ...

  7. JDK 自带的服务发现框架 ServiceLoader 好用吗?

    请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 Github · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...

  8. uniapp路由守卫

    项目地址:https://hhyang.cn/v2/start/quickstart.html ​ 按照他的方法安装,创建相应的js即可,有点基础的自己捣鼓一下就可以了.我的应用场景是:没有登录痕迹- ...

  9. 第四周(实际是n+周)

    1. tomcat启动报错 报错内容:ERROR RUNNING 'TOMCAT': UNABLE TO OPEN DEBUGGER PORT (127.0.0.1:38667): JAVA.NET. ...

  10. 我眼中的大数据(三)——MapReduce

    ​ 这次来聊聊Hadoop中使用广泛的分布式计算方案--MapReduce.MapReduce是一种编程模型,还是一个分布式计算框架. MapReduce作为一种编程模型功能强大,使用简单.运算内容不 ...