基础组件库先做到这个阶段,后面我会继续新增.完善 接下来,我们对之前做的组件进行打包发布到 npm 返回阅读列表点击 这里 组件库优化 通用层叠样式表 我想大家都注意到了,前面我们在写组件的时候,scss 中类的命名都是 jeremy-x 这样的形式,这是为了用选择器来做到统一配置. 如何配置 我们在 src/lib 目录下,创建一个 jeremy.scss 的文件,编写如下代码: [class^="jeremy-"],[class*=" jeremy-"]* {…

阅读列表 01 - Vue3 UI Framework - 开始 02 - Vue3 UI Framework - 顶部边栏 03 - Vue3 UI Framework - 首页 04 - Vue3 UI Framework - 文档页 05 - Vue3 UI Framework - Button 组件 ️ 06 - Vue3 UI Framework - Dialog 组件 ️ 07 - Vue3 UI Framework - Switch 组件 ️ 08 - Vue3 UI Framew…

写在前面 一年多没写过博客了,工作.生活逐渐磨平了棱角. 写代码容易,写博客难,坚持写高水平的技术博客更难. 技术控决定慢慢拾起这份坚持,用作技术学习的阶段性总结. 返回阅读列表点击 这里 开始 大前端时代,最近在面试前端工程师的过程中,有感而发,技术更新迭代快,学习成本高.浏览了各大博客论坛,千差万别,比较混乱.最终决定参考 Element UI 的设计风格,主题色选择紫色(受到 MaterialDesignInXamlToolkit 的影响),写一套基于 Vue3 的 UI 框架库和对应的官…

官网基本做好了,接下来开始做核心组件 返回阅读列表点击 这里 目录准备 在项目 src 目录下创建 lib 文件夹,用来存放所有的核心组件吧.然后再在 lib 文件夹下创建 Button.vue 文件. 您也可以进行结构化设计,比如,这里就不进行了. |-lib |-Button |- Button.vue |- Button.ts |_ Button.scss 需求分析 惯例先行需求分析 多种类基础 Button,包含警告.成功.危险等 允许设置 Button 为禁用状态 不止有传统 Butt…

为了提升用户体验,今天我们来对 jeremy-ui 官网做一个优化 返回阅读列表点击 这里 Markdown 解析支持 ️ 习惯用 markdown 语法编辑,所以我们增加项目源码对 markdown 的支持,虽然即便这样做依然无法和 JeremyPress 或者 VuePress 相比,但是至少不用纠结于原生 html 了,能够在一定程度上解决排版问题. 我们需要增加一个 plugins 文件夹,并且在此文件夹下创建一个 md.ts 的文件,代码如下: import path from 'pa…

项目官网也基本完成了,接下来我们再讲一下如何将项目官网部署到 GitHub Pages 上 返回阅读列表点击 这里 项目配置 常见的模式有三种,即 History 模式 Hash 模式 Memory 模式 在我们的项目中采用的是 vue-router, vue-router 有两种模式, 即 History 和 Hash 模式. 三者的区别与联系这里不再赘述,感兴趣的小伙伴可以自行查询. 为了简单快捷的部署,这里我们采用 Hash 模式将项目官网部署到 GitHub Pages 注意 不同的模式…

顶部边栏做完了,接下来开始做官网的首页 返回阅读列表点击 这里 创建视图文件夹 让我们先新建一个 src/views 文件夹,用来存放官网的主要视图 然后在该文件夹下新建两个 vue 文件,作为我们的视图 Home.vue,首页 Document.vue,文档页 再配置一下 router.ts 来实现跳转 import { createWebHistory, createRouter } from 'vue-router' import Home from './views/Home.vue'…

做完按钮之后,我们应该了解了遮罩层的概念,接下来我们来做 Dialog 组件! 返回阅读列表点击 这里 需求分析 默认是不可见的,在用户触发某个动作后变为可见 自带白板卡片,分为上中下三个区域,分别放置标题.内容.操作 有两个基本操作:确定.取消 卡片后应放置淡黑色遮罩层,遮住原本网页内容 可以自定义是否允许取消 右上角提供小叉叉来允许关闭 允许通过点击遮罩层来关闭 所以,我们能够得出如下的参数表格 参数 含义 类型 可选值 默认值 visible 是否可见 boolean false / tr…

接下来再做一个常用的组件 - input 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 input 组件有两种类型,即 input 和 textarea 类型 当类型为 textarea 时,可以自定义行高,但是当类型为 input 时,行高恒为 1 可以自定义外边框的颜色 可以设置为禁用 那么可以得到如下参数表格 参数 含义 类型 可选值 默认值 value 绑定值 string 字符串 必填 theme 类型 string input / textarea in…

接下来做个自定义的表格组件,即 table 组件 返回阅读列表点击 这里 需求分析 开始之前我们先做一个简单的需求分析 基于原生 table 标签的强语义 允许用户自定义表头.表体 可选是否具有边框 那么可以整理出以下参数表格 参数 含义 类型 可选值 默认值 heads 表头 Array 数组,每一项包含两个 string 字段:name.identifier 必填 datas 表数据 Array 数组,每一项包含与 heads 相同数量的 string 字段 必填 bordered 是否有边…