Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(release): publish 0.0.1 #25

Merged
merged 2 commits into from
Oct 11, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ package-lock.json
node_modules
packages/**/coverage
packages/**/dist
packages/vantui-doc/site
packages/vantui-demo/weapp
packages/vantui-demo/alipay
packages/vantui-demo/swan
Expand Down
155 changes: 29 additions & 126 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,148 +1,51 @@

# @antmjs/vantui

> 一套适用于Taro3的vantui组件库
### 简介

## 为什么需要
一套基于 Taro 框架开发的多端 UI 组件库

基于VantUI改造的Taro组件库
组件库99%基于有赞团队的[vant-weapp](https://github.com/youzan/vant-weapp)改造而来

## 安装
#### 说明

```bash
yarn add @antmjs/vantui
```

## 使用

src/style/index.less

```css
@import 'node_modules/@antmjs/vantui/dist/style/index';
```
- 为什么要做这个组件库?我们认为有赞团队的组件库经过了多年的实践积累,以及经过我们的实际体验之后认为确实是一款优秀的组件库,但可惜的是他们只提供了Vue版本和微信小程序版本,但我们的技术架构选用的是京东的Taro,所以就开始思考如何能把有赞微信小程序的版本迁移到Taro上面来,最终我们实现了@antmjs/vantui。
- 为什么是99%?迁移的步骤其实不难,第一步100%同步样式,第二步通过Taro convert转译之后再重构js部分,但因为有赞微信小程序的版本只完全基于微信小程序实现的,所以在兼容支付宝小程序、H5的时候还是存在不能100%兼容的情况,具体的个别差异点下面有提供。

```js
import { Button } from '@antmjs/vantui'
```
#### 优势

yarn && npx husky install
- TS类型安全
- 目前支持微信小程序、支付宝小程序、H5。其他端逐渐更新中...

npx lerna bootstrap
#### 安装

cd packages/vantui -> npx rollup -c ./rollup.watch.config.js -w

cd packages/vantui-demo -> yarn watch:weapp
yarn add @antmjs/vantui

注意事项:
#### 差异点
- 组件属性均用驼峰代替
- slot改为传递通过属性传递ReactNode

customClass -> className
#### 使用

追加calssName和style和others
```app.less
@import '@antmjs/vantui/dist/style/index.less';

```
className={
utils.bem('nav-bar', {
fixed,
}) +
' custom-class ' +
(border ? 'van-hairline--bottom' : '') +
` ${className}`
page,
body {
font-size: 28px;
}
style={utils.style([
computed.barStyle({
zIndex,
statusBarHeight,
safeAreaInsetTop,
}) +
'; ' +
customStyle,
style,
])}
{...others}
```

slot代码的转换是通过传递render函数

$emit 相当于子组件触发props的函数

https://github.com/youzan/vant-weapp/commits/dev

本仓库是从1.8.4的版本迁移出来,所以1.8.4以后的commit需要修复

getRect getAllRect的第一个参数传null就行




织夏:
Toast
Style

Divider
Empty
NoticeBar
Collapse
Circle

Checkbox
Radio
Switch
Uploader


空镜
Image[完成]
Layout[完成]

DropdownMenu[完成]
Loading[完成]
Notify[完成]
Cell[完成]
SwipeCell[完成]
Slider[完成]

Calendar[完成]
Picker[完成]
DatetimePicker[完成]
Grid[完成]
Sidebar[完成]


蓝根
Popup[完成]
ActionSheet[完成]
Overlay[完成]
Steps[完成]
Stepper[完成]
IndexBar[完成]
ShareSheet[完成]

TreeSelect[完成]
Dialog[完成]
Area[完成]

三少

Button[完成]

Icon[完成]

Progress[完成]

Skeleton[完成]

CountDown[完成]

Tag[完成]

Sticky[完成]

Rate[完成]
```app.jsx
import { Button } from '@antmjs/vantui'

Search[完成]
<Button onClick={() => { console.log('Hello World') }}>Hello World</Button>
```

NavBar[完成]
其他使用方式暂时请查看[有赞文档](https://youzan.github.io/vant-weapp/#/home)

Tab[完成]
#### 参与贡献的小伙伴

TabBar[完成]
[![hisanshao](https://avatars.githubusercontent.com/u/26359618?s=100&v=4)](https://github.com/hisanshao/) | [![Chitanda60](https://avatars.githubusercontent.com/u/16026533?s=100&v=4)](https://github.com/Chitanda60/) | [![zuolung](https://avatars.githubusercontent.com/u/19684540?s=100&v=4)](https://github.com/Banlangenn/) | [![hisanshao](https://avatars.githubusercontent.com/u/28145148?s=100&v=4)](https://github.com/zuolung/)
:---:|:---:|:---:|:---:
[hisanshao](https://github.com/hisanshao/) | [Chitanda60](https://github.com/Chitanda60/) | [Banlangenn](https://github.com/Banlangenn/) | [zuolung](https://github.com/zuolung/)
12 changes: 9 additions & 3 deletions lerna.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@
"message": "chore(release): publish %s"
}
},
"packages": ["packages/*"],
"ignoreChanges": ["packages/vantui-demo/**", "**/*.md", "**/__test__/**"],
"version": "0.0.0"
"packages": [
"packages/*"
],
"ignoreChanges": [
"packages/vantui-demo/**",
"**/*.md",
"**/__test__/**"
],
"version": "0.0.1"
}
4 changes: 2 additions & 2 deletions packages/vantui-demo/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vantui-demo",
"version": "0.0.0",
"version": "0.0.1",
"private": true,
"description": "Taro应用模版",
"templateInfo": {
Expand Down Expand Up @@ -105,7 +105,7 @@
},
"dependencies": {
"@antmjs/mini-fix": "^1.12.0",
"@antmjs/vantui": "^0.0.0",
"@antmjs/vantui": "0.0.1",
"@babel/runtime-corejs3": "^7.14.7",
"@tarojs/components": "3.3.7",
"@tarojs/react": "3.3.7",
Expand Down
44 changes: 44 additions & 0 deletions packages/vantui-doc/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
### 博客地址

[点击查看](https://antmjs.github.io/vantui/)

### 拽写文章说明

1. 拉取代码,执行 yarn install

2. 切出一个独立的分支,执行 yarn run dev

3. 更新 vant.config.js 的 nav 配置

```json
{
"nav": [
{
"title": "博客",
"items": [
{
"path": "home",
"title": "简介",
"hideSimulator": true
}
]
},
{
"title": "前端工程建设",
"items": [
{
"path": "construction-home",
"title": "概览",
"hideSimulator": true
}
]
}
]
}
```

注:不支持目录结构,所以如果有分组需求的可以以前缀作为分组,比如 construction-\*

4. docs 目录里面添加 path 对应的 markdown 文件,比如 construction-\*.md,编辑文件

5. 提交 PR,Review 通过之后 yarn run build-site
3 changes: 3 additions & 0 deletions packages/vantui-doc/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: ['@vant/cli/preset'],
}
48 changes: 48 additions & 0 deletions packages/vantui-doc/docs/home.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
### 简介

一套基于 Taro 框架开发的多端 UI 组件库

组件库99%基于有赞团队的[vant-weapp](https://github.com/youzan/vant-weapp)改造而来

#### 说明

- 为什么要做这个组件库?我们认为有赞团队的组件库经过了多年的实践积累,以及经过我们的实际体验之后认为确实是一款优秀的组件库,但可惜的是他们只提供了Vue版本和微信小程序版本,但我们的技术架构选用的是京东的Taro,所以就开始思考如何能把有赞微信小程序的版本迁移到Taro上面来,最终我们实现了@antmjs/vantui。
- 为什么是99%?迁移的步骤其实不难,第一步100%同步样式,第二步通过Taro convert转译之后再重构js部分,但因为有赞微信小程序的版本只完全基于微信小程序实现的,所以在兼容支付宝小程序、H5的时候还是存在不能100%兼容的情况,具体的个别差异点下面有提供。

#### 优势

- TS类型安全
- 目前支持微信小程序、支付宝小程序、H5。其他端逐渐更新中...

#### 安装

yarn add @antmjs/vantui

#### 差异点
- 组件属性均用驼峰代替
- slot改为传递通过属性传递ReactNode

#### 使用

```app.less
@import '@antmjs/vantui/dist/style/index.less';

page,
body {
font-size: 28px;
}
```

```app.jsx
import { Button } from '@antmjs/vantui'

<Button onClick={() => { console.log('Hello World') }}>Hello World</Button>
```

其他使用方式暂时请查看[有赞文档](https://youzan.github.io/vant-weapp/#/home)

#### 参与贡献的小伙伴

[![hisanshao](https://avatars.githubusercontent.com/u/26359618?s=100&v=4)](https://github.com/hisanshao/) | [![Chitanda60](https://avatars.githubusercontent.com/u/16026533?s=100&v=4)](https://github.com/Chitanda60/) | [![zuolung](https://avatars.githubusercontent.com/u/19684540?s=100&v=4)](https://github.com/Banlangenn/) | [![hisanshao](https://avatars.githubusercontent.com/u/28145148?s=100&v=4)](https://github.com/zuolung/)
:---:|:---:|:---:|:---:
[hisanshao](https://github.com/hisanshao/) | [Chitanda60](https://github.com/Chitanda60/) | [Banlangenn](https://github.com/Banlangenn/) | [zuolung](https://github.com/zuolung/)
28 changes: 28 additions & 0 deletions packages/vantui-doc/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"name": "vantui-doc",
"private": true,
"version": "0.0.1",
"description": "",
"scripts": {
"dev": "npx vant-cli dev",
"test": "npx vant-cli test",
"build": "npx vant-cli build",
"release": "npx vant-cli release",
"test:coverage": "open test/coverage/index.html",
"build-site": "npx vant-cli build-site && gh-pages -d site"
},
"author": "sanshao",
"license": "MIT",
"peerDependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"@vant/cli": "^3.9.0",
"@vue/compiler-sfc": "^3.0.0",
"vue": "^3.0.0"
},
"browserslist": [
"Chrome >= 51",
"iOS >= 10"
]
}
1 change: 1 addition & 0 deletions packages/vantui-doc/src/index/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# 占位文件
34 changes: 34 additions & 0 deletions packages/vantui-doc/vant.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
module.exports = {
name: 'vantui-doc',
build: {
css: {
preprocessor: 'less',
},
site: {
publicPath: '/vantui/',
searchConfig: {},
},
},
site: {
title: 'vantui',
logo: 'https://img.yzcdn.cn/vant/logo.png',
links: [
{
logo: 'https://b.yzcdn.cn/vant/logo/github.svg',
url: 'https://github.com/antmjs/vantui',
},
],
nav: [
{
title: '基本介绍',
items: [
{
path: 'home',
title: '简介',
hideSimulator: true,
},
],
},
],
},
}
Loading