Vant-Weapp 小程序开发
高手请不要在这里浪费时间，可能没有你想要的东西
目录结构
v.0.5.20
├── LICENSE // 版权
├── README.md // 书名
├── babel.config.js // babel 配置
├── browserslist // 值的浏览器的设备
├── build // 构建目录
│ ├── compiler.js // gulpfile 文件
│ ├── dev.js // 开发启动命令
│ ├── release-site.sh // 释放 site
│ ├── release.sh // 释放
│ ├── webpack.doc.dev.js // vant-doc 开发文档
│ └── webpack.doc.prd.js // vant-doc 生层文档
├── dist
│ ├── action-sheet
│ ├── area
│ ├── badge
│ ├── badge-group
│ ├── button
│ ├── card
│ ├── cell
│ ├── cell-group
│ ├── checkbox
│ ├── checkbox-group
│ ├── col
│ ├── collapse
│ ├── collapse-item
│ ├── common
│ ├── datetime-picker
│ ├── definitions
│ ├── dialog
│ ├── field
│ ├── goods-action
│ ├── goods-action-button
│ ├── goods-action-icon
│ ├── icon
│ ├── info
│ ├── loading
│ ├── mixins
│ ├── nav-bar
│ ├── notice-bar
│ ├── notify
│ ├── overlay
│ ├── panel
│ ├── picker
│ ├── picker-column
│ ├── popup
│ ├── progress
│ ├── radio
│ ├── radio-group
│ ├── rate
│ ├── row
│ ├── search
│ ├── slider
│ ├── stepper
│ ├── steps
│ ├── submit-bar
│ ├── swipe-cell
│ ├── switch
│ ├── tab
│ ├── tabbar
│ ├── tabbar-item
│ ├── tabs
│ ├── tag
│ ├── toast
│ ├── transition
│ ├── tree-select
│ └── wxs
├── docs
│ ├── markdown
│ └── src
├── example
│ ├── app.js
│ ├── app.json
│ ├── app.wxss
│ ├── common
│ ├── components
│ ├── config.js
│ ├── custom-tab-bar
│ ├── pages
│ └── sitemap.json
├── lib
│ ├── action-sheet
│ ├── area
│ ├── badge
│ ├── badge-group
│ ├── button
│ ├── card
│ ├── cell
│ ├── cell-group
│ ├── checkbox
│ ├── checkbox-group
│ ├── col
│ ├── collapse
│ ├── collapse-item
│ ├── common
│ ├── datetime-picker
│ ├── definitions
│ ├── dialog
│ ├── field
│ ├── goods-action
│ ├── goods-action-button
│ ├── goods-action-icon
│ ├── icon
│ ├── info
│ ├── loading
│ ├── mixins
│ ├── nav-bar
│ ├── notice-bar
│ ├── notify
│ ├── overlay
│ ├── panel
│ ├── picker
│ ├── picker-column
│ ├── popup
│ ├── progress
│ ├── radio
│ ├── radio-group
│ ├── rate
│ ├── row
│ ├── search
│ ├── slider
│ ├── stepper
│ ├── steps
│ ├── submit-bar
│ ├── switch
│ ├── tab
│ ├── tabbar
│ ├── tabbar-item
│ ├── tabs
│ ├── tag
│ ├── toast
│ ├── transition
│ ├── tree-select
│ └── wxs
├── package.json
├── packages // 开发目录 使用 less + ts
│ ├── action-sheet // ActionSheet 上拉菜单组件
│ ├── area // Area 省市区选择 组件
│ ├── button // 按钮组件
│ ├── card // Card 商品卡片
│ ├── cell // Cell 单元格
│ ├── cell-group // Cell-group 组件
│ ├── checkbox // checkbox 组件
│ ├── checkbox-group // checkbox 组 组件
│ ├── circle // Circle 环形进度条 组件
│ ├── col // 网格系统的 col
│ ├── collapse // Collapse 折叠面板
│ ├── collapse-item // Collapse 折叠面板项
│ ├── common // 公共样式，公共函数部分
│ ├── datetime-picker // 时间选择器
│ ├── definitions // ts 的类型定义
│ ├── dialog // Dialog 弹出框
│ ├── divider // Divider 分割线
│ ├── field // Field 输入框
│ ├── goods-action // GoodsAction 商品导航
│ ├── goods-action-button // GoodsAction 商品导航
│ ├── goods-action-icon // GoodsAction 商品导航
│ ├── grid // Grid 宫格
│ ├── grid-item // Grid 宫格项目
│ ├── icon // 图标
│ ├── info // info 信息
│ ├── loading // loading 状态
│ ├── mixins // 一些混入
│ ├── nav-bar // 顶部导航条
│ ├── notice-bar // 提示条
│ ├── notify // Notify 消息提示
│ ├── overlay // mask 层
│ ├── panel // Panel 面板
│ ├── picker // Picker 选择器
│ ├── picker-column // Picker 选择器 每一列
│ ├── popup // Popup 弹出层
│ ├── progress // 进度条
│ ├── radio // 单选按钮
│ ├── radio-group // 单选按钮组
│ ├── rate // 评论
│ ├── row // 网格系统的 row
│ ├── search // 搜索组件
│ ├── sidebar // Sidebar 侧边导航
│ ├── sidebar-item // Sidebar 侧边导航 的每一项
│ ├── slider // Slider 滑块
│ ├── stepper // Stepper 步进器
│ ├── steps // Steps 步骤条
│ ├── sticky // Sticky 粘性布局
│ ├── submit-bar // SubmitBar 提交订单栏
│ ├── swipe-cell // SwipeCell 滑动单元格
│ ├── switch // switch 开关
│ ├── tab // Tab 标签页
│ ├── tabbar // Tabbar 标签栏
│ ├── tabbar-item // Tabbar 标签栏 item 每一项
│ ├── tabs //
│ ├── tag // Tag 标签
│ ├── toast // Toast 轻提示
│ ├── transition // Transition 动画
│ ├── tree-select // TreeSelect 分类选择
│ └── wxs // 辅助一些微信小程序的一些脚本
├── postcss.config.js // postcss 配置
├── tsconfig.example.json // example 的ts配置
├── tsconfig.json // ts 配置
├── tsconfig.lib.json // ts lib 的样式
└── yarn.lock
分析
- vant-weapp 是使用 gulp4 进行编译的，文档部分使用 vant-doc 将 markdown 文件转换成 Vue 组件。整个 小程序 UI 框架也类似于 Vue, 做了很多的处理。提供了很多类Vue2.*的开发体验。使用 VantComponent 来命名 小程序组件，然后将小程序的 optionsAPI 映射成 VueOptionsAPI,所以会有Vue的体验，这里猜测这样做的目的是使用自己的组件，能隔应用别的UI组件的时候造成混乱的现象。
- 小程序使用 TS + Less 来处理 逻辑和样式
- 比较基础的组件就是 transition 组件，我们分析小程序组件就是使用这些组件开始分析，来提高自己。
