Docz 用 MDX 写 React UI 组件文档】的更多相关文章

Docz 用 MDX 写 React UI 组件文档 前言 为了提升开发效率,创建一套 UI 组件库是一种较为有效的方式之一:可以减少重复工作.提高可复用,所以现在越来越多团队开始创建自己的 UI 组件库.较早的 Twitter 的 Bootstrap 虽然只能称为 UI 库,但也大大提升了开发效率.后面 MVVM 大行其道 ,前端终于可以把 HTML.CSS.JS 放在一起开发包含 UI .交互真正意义上的组件了,现在有基于 React 的 Material-UI.国内阿里金服基于 React…
前言 最近做的项目使用了微前端框架single-spa. 对于这类微前端框架而言,通常有个utility应用,也就是公共应用,里面是各个子应用之间可以共用的一些公共组件或者方法. 对于一个团队而言,项目中公共组件和方法的使用难点不在于封装不在于技术,很多时候在于团队内部成员是否都能了解这些组件,以避免重复开发,从而提升团队效率. 如果是团队比较小,人员比较稳定的项目组可能还好点,对于团队比较大,人员流动较快的团队,这些通用组件和方法往往就被人遗忘在角落,很难再得到有效利用. 因为我所在的项目还在…
最流行的开源 React UI 组件库 material-ui 国外流行(安卓手机的界面效果)文档 ant-design 国内流行 (蚂蚁金服 设计,一套 PC.一套移动端的____下拉菜单.分页......) PC_git Mobile_git create-react-app myApp yarn add antd        // 安装到生产依赖 在 index.js 中 import "antd/dist/antd.min.css" 会打包全部文件 import React,…
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Router>来保持您的UI与URL同步. import { BrowserRouter } from 'react-router-dom' <BrowserRouter basename={optionalString} forceRefresh={optionalBool} getUserConfi…
一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么的.该怎么用,还必须得再去翻看源码,或者压根就没注意到这个组件 的存在导致重复开发.这个时候就非常需要维护对应的组件文档来保障不同开发者之间良好的协作关系了. 但是传统的手动维护文档又会带来新问题: 效率低,写文档是个费时费力的体力活,好不容易抽时间把组件开发完了回头还要写文档,想想都头大. 易出错…
程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用第三方的一些比较常见问题 文档提取信息不全面,可能有些信息你需要提取但是它又不支持.这种情况下就只能修改三方的插件源码了. 需要额为的注释信息来标记,例如 vuese 需要给方法 打 @vuese.@arg 等标记来提供方法信息. 俗话说自己动手丰衣足食,打造自己的vue文档生成工具与自己项目结合使…
厨娘ui设计文档 一.概述 中国的饮食文化从古到今源远流长.在生活日益丰富的今天,人们对饮食的要求不仅仅是温饱,更讲究健康和美味.近年来,饮食甚至成为娱乐的一部分,关于吃的流行用语层出不穷,可见在当今社会,饮食文化成了必不可少的一部分,多少人以吃货自居,渴望有朝一日能尝尽人间美味佳肴.但生活质量的日益提高并没有伴随着大多数人的健康理念和健康知识的同步提高,这主要是大多数人没有途径去了解更多的饮食知识和文化.因此,我们的团队希望开发一款以饮食社区为主题的APP,为“吃货”们提供饮食交流的平台. 二…
系列目录 基于WPF重复造轮子,写一款数据库文档管理工具(一) 本篇重点 上次发表了基于WPF重复造轮子,写一款数据库文档管理工具(一) 得到不少人支持,文章一度上到了博客园推荐表首页,看来大家对这个工具还是很喜欢.今天就继续来分享一下我在开发这款工具的过程中积累的一些技术点. 本篇主要讲的是基于HandyControl控件的DataGrid进行数据绑定以及如何实现自定义一个自定义控件.在写这些之前我们先来看下我们工具的整个界面: 今天我们要实现的就是右边主界面展示的列表区域,其实这个区域是由多…
UI组件 Vue开发插件流程 本来是昨天要写总结的,感觉自己写不好,就放弃了.今天看到了iview和element有一些摩擦,是关于代码借鉴的问题(哈哈),不做评价.谁下生会写组件,我仿(chao)写了radonUI,这个组件体量比较小,好仿写.就是以这个为切入口写UI组件,先自己写,然后在仿写.看看别人写的比如bootstrap,这样提高挺快的.其实UI组件套路差不多,写过一遍就有感觉了.不像以前没想法.没思路. 概述 大部分组件我都写了一遍,剩下的要参考iview和element组件.这些组…
1.组件的拆分 组件拆分的前提 当所有的逻辑都出现在一个组件内时 组件会变得非常复杂 不便与代码的维护 所以对组件进行拆分 IU组件 进行页面渲染 容器组件  进行逻辑操作 UI组件的拆分 新建一个 TodoListUI.js 将 TodoList 组件的 render 方法进行拆分封装为 UI 组件 其余的 TodoList 组件为 容器组件 # TodoListUI.js import  React, { Component } from 'react'; import 'antd/dist…
最近在研究 muse-ui 的实现,发现网上很少有关于 vue 插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好. 笔者结合官方文档,与自己的摸索总结,以最简单的 FlexBox 组件为例子,带大家入门 vue 的插件编写,如果您是大牛,不喜勿喷- 项目结构 | src | ---| plugin | ---| ---| flexbox # 组件文件夹 | ---| ---| ---| flexbox.vue # flex 布局的父组件 | ---| ---| ---| fl…
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --><link rel="stylesheet" href="https://un…
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用. <!-- 引入样式 --><linkrel="stylesheet"href="https://unpkg.com/mint-ui/lib/style.css"><!-- 引入组件…
记录基于 antd 封装业务组件并发布到npm 上的过程:(TS + React + Sass) 初始化项目: 1.yarn create react-app winyhui --typescript 引入antd 2.yarn add antd 高级配置 我们需要对 create-react-app 的默认配置进行自定义 3.yarn add react-app-rewired customize-cra 引入 react-app-rewired 并修改 package.json 里的启动配置…
特点 支持热更新 快速启动,依赖于 vite,无需另起服务 自动生成组件导航 ui 采用了vant-ui的样式 核心方法覆盖率达到了 92.86% 使用 yarn add vite-plugin-vue-docs -D // vite.config.js import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import vueDocs from "vite-p…
项目背景 公司业务历史悠久且复杂,数据库的表更是多而繁杂,每次基于老业务做功能开发都需要去翻以前的表和业务代码.需要理解旧的表的用途以及包含的字段的含义,表少还好说,但是表一多这就很浪费时间,而且留下来的文档都是残缺不全,每次查一些表的含义都要捯饬很久.在网上搜索关于数据库文档管理工具搜到最多的就是Screw和DBCHM,一个是基于Java的工具.另一个则是bug很多,表一多就一直转圈圈进不去.所以自己就动手开发了这款SmartSQL的工具. 它是一款基于.Net 4.6.1.WPF开发的一款数…
导读 背景 痛点在哪? 为什么要写接口文档? API规范 接口工具 总结 背景        随着业务的发展,支撑组的项目也是越来越多.同时,从整个支撑组项目架构体系(含运维和运营体系),我们对系统业务水平拆分,垂直分层,让业务系统更加清晰,产生了一系列平台和子系统,并使用接口进行数据交互.伴随着业务的发展,接口营运而生,并且会越来越多. 痛点在哪        我们运营和维护着诸多的对外接口,很多现有的接口服务寄宿在各个不同的项目,哪些应用在使用api也没有管理起来.并且以前的调用模式也是比较…
官网的首页做完了,接下来开始做官网的文档页 返回阅读列表点击 这里 路由设计 先想想我们需要文档页通向哪些地方,这里直接给出我的设计: 所属 子标题 跳转路径 文件名(*.vue) 指南 介绍 /document/introduction Introduction 指南 安装 /document/install Install 指南 快速上手 /document/start Start 组件 Button /document/button Button 组件 Dialog /document/d…
依赖: <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger2 --> <dependency> <groupId>io.springfox</groupId> <artifactId>springfox-swagger2</artifactId> <version>2.9.2</version> </dependen…
uiw 高品质的UI工具包,基于React 16+的组件库.…
github 开源地址:zswui github 说明文档:wiki 1.新建目录wui (1)进入到 wui 目录 执行 npm init 命令初始化项目.更具提示信息填充将会生成的 package.json 文件. (2)新建 webpack.config.js 打包文件. (3)新建 README.md 项目说明文件. (4)新建 .gitignore 项目忽略文件. (5)安装webpack 用于编译 JavaScript 模块. npm install webpack webpack-…
https://salt-ui.github.io/?spm=a219a.7629140.0.0.JWztQO…
1.下载swagger ui:http://swagger.io/swagger-ui/: 2.在应用目录里新建一个目录xxx:如图 3.解压后把dist目录的所有文件拷贝到新建的目录里面: 4.在新建的目录里面新建一个php文件,把index.html的代码拷贝到新建的php文件里面: 5.下载json文件:http://petstore.swagger.io/v2/swagger.json,按照这个json文件的格式编写接口的参数: 6.在控制器里面写一个api方法,整合swagger,如图…
这个是angular-mobile-ui的主要模块 应用这个模块你也将同时获取到mobile-angular-ui.core和mobile-angular-ui.components的特性 他不在需要其他任何的css 使用 在你的应用中声明以下代码 angular.module('myApp', ['mobile-angular-ui']); 里面包含了 手势 拖拽 滑动 触碰 变化 组件 模式 导航条 滚动 侧边栏 开关 核心 活动链接 铺货 外部点击 状态共享 默认触碰移动 手势 他用支持触…
一.标题 标题其实和HTML中的h系列很像,想要设置为标题的文字前面加#来表示一个#是一级标题,二个#是二级标题,以此类推.支持六级标题. 注:标准语法一般在#后跟个空格再写文字, 示例: 效果如下: 这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 二.字体 加粗 要加粗的文字左右分别用两个*号包起来 斜体 要倾斜的文字左右分别用一个*号或者用_包起来 斜体加粗 要倾斜和加粗的文字左右分别用三个*号包起来 删除线 要加删除线的文字左右分别用两个~~号包起来 示…
使用Aspose.Words的Document.Save(HttpResponse response, string fileName, ContentDisposition contentDisposition, Aspose.Words.Saving.SaveOption saveOption)方法,将Document直接写入response时,需要加Response.End(); Document doc = new Document(postedFile.InputStream); do…
http://www.layui.com/doc/modules/layer.html…