Vant主题介绍

一、Vant 主题特点

1. 轻量简洁，风格清新自然，提高应用加载速度，组件样式注重实用，避免视觉干扰。
2. 高度可定制，提供丰富主题定制选项，可调整颜色、字体等元素，满足不同需求。
3. 响应式设计，适应不同屏幕尺寸和设备类型，确保应用在各种设备上呈现最佳效果。
4. 拥有丰富色彩体系，颜色搭配和谐，可根据项目特点和品牌形象选择或定制。
5. 易用性强，注重用户体验，组件使用方便快捷，交互设计简洁明了，降低学习成本。

二、应用场景

1. 移动电商应用：轻量简洁风格和丰富组件库适合展示商品信息和设计购物流程，响应式设计确保不同设备良好展示，主题定制吸引用户提高购买欲。
2. 社交娱乐应用：营造活泼有趣氛围，增强用户互动和参与感，如在社交聊天应用中装饰界面。
3. 企业级移动应用：满足简洁高效需求，打造专业实用应用，融入品牌元素增强认同感，响应式设计方便办公。
4. 生活服务类应用：打造简洁明了界面，方便用户快速找到服务和信息，如美食外卖应用展示餐厅和菜品信息。

三、组件目录

vant组件

1. General（基础组件）
   • Button（按钮） https://vant-ui.github.io/vant/#/zh-CN/button
   • Cell（单元格） https://vant-ui.github.io/vant/#/zh-CN/cell
   • ConfigProvider（全局配置） https://vant-ui.github.io/vant/#/zh-CN/config-provider
   • Icon（图标） https://vant-ui.github.io/vant/#/zh-CN/icon
   • Image（图片） https://vant-ui.github.io/vant/#/zh-CN/image
   • Layout（布局） https://vant-ui.github.io/vant/#/zh-CN/col
   • Popup（弹出层） https://vant-ui.github.io/vant/#/zh-CN/popup
   • Space（间距） https://vant-ui.github.io/vant/#/zh-CN/space
   • Style（内置样式） https://vant-ui.github.io/vant/#/zh-CN/style
   • Toast（轻提示） https://vant-ui.github.io/vant/#/zh-CN/toast
2. Form（表单组件）
   • Calendar（日历） https://vant-ui.github.io/vant/#/zh-CN/calendar
   • Cascader（级联选择） https://vant-ui.github.io/vant/#/zh-CN/cascader
   • Checkbox（复选框） https://vant-ui.github.io/vant/#/zh-CN/checkbox
   • DatetimePicker（日期选择） https://vant-ui.github.io/vant/#/zh-CN/date-picker
   • Field（输入框） https://vant-ui.github.io/vant/#/zh-CN/field
   • Form（表单） https://vant-ui.github.io/vant/#/zh-CN/form
   • NumberKeyboard（数字键盘） https://vant-ui.github.io/vant/#/zh-CN/number-keyboard
   • PasswordInput（密码输入框） https://vant-ui.github.io/vant/#/zh-CN/password-input
   • Picker（选择器） https://vant-ui.github.io/vant/#/zh-CN/picker
   • PickerGroup（选择器组） https://vant-ui.github.io/vant/#/zh-CN/picker-group
   • Radio（单选框） https://vant-ui.github.io/vant/#/zh-CN/radio
   • Rate（评分） https://vant-ui.github.io/vant/#/zh-CN/rate
   • Search（搜索） https://vant-ui.github.io/vant/#/zh-CN/search
   • Slider（滑块） https://vant-ui.github.io/vant/#/zh-CN/slider
   • Signature（签名） https://vant-ui.github.io/vant/#/zh-CN/signature
   • Stepper（步进器） https://vant-ui.github.io/vant/#/zh-CN/stepper
   • Switch（开关） https://vant-ui.github.io/vant/#/zh-CN/switch
   • TimePicker（时间选择） https://vant-ui.github.io/vant/#/zh-CN/time-picker
   • Uploader（文件上传） https://vant-ui.github.io/vant/#/zh-CN/uploader
3. Feedback（反馈组件）
   • ActionSheet（动作面板） https://vant-ui.github.io/vant/#/zh-CN/action-sheet
   • Barrage（弹幕） https://vant-ui.github.io/vant/#/zh-CN/barrage
   • Dialog（弹出框） https://vant-ui.github.io/vant/#/zh-CN/dialog
   • DropdownMenu（下拉菜单） https://vant-ui.github.io/vant/#/zh-CN/dropdown-menu
   • FloatingPanel（浮动面板） https://vant-ui.github.io/vant/#/zh-CN/floating-panel
   • FloatingBubble（浮动气泡） https://vant-ui.github.io/vant/#/zh-CN/floating-bubble
   • Loading（加载） https://vant-ui.github.io/vant/#/zh-CN/loading
   • Notify（消息通知） https://vant-ui.github.io/vant/#/zh-CN/notify
   • Overlay（遮罩层） https://vant-ui.github.io/vant/#/zh-CN/overlay
   • PullRefresh（下拉刷新） https://vant-ui.github.io/vant/#/zh-CN/pull-refresh
   • ShareSheet（分享面板） https://vant-ui.github.io/vant/#/zh-CN/share-sheet
   • SwipeCell（滑动单元格） https://vant-ui.github.io/vant/#/zh-CN/swipe-cell
4. Display（展示组件）
   • Badge（徽标） https://vant-ui.github.io/vant/#/zh-CN/badge
   • Circle（环形进度条） https://vant-ui.github.io/vant/#/zh-CN/circle
   • Collapse（折叠面板） https://vant-ui.github.io/vant/#/zh-CN/collapse
   • CountDown（倒计时） https://vant-ui.github.io/vant/#/zh-CN/count-down
   • Divider（分割线） https://vant-ui.github.io/vant/#/zh-CN/divider
   • Empty（空状态） https://vant-ui.github.io/vant/#/zh-CN/empty
   • Highlight（高亮文本） https://vant-ui.github.io/vant/#/zh-CN/highlight
   • ImagePreview（图片预览） https://vant-ui.github.io/vant/#/zh-CN/image-preview
   • Lazyload（懒加载） https://vant-ui.github.io/vant/#/zh-CN/lazyload
   • List（列表） https://vant-ui.github.io/vant/#/zh-CN/list
   • NoticeBar（通知栏） https://vant-ui.github.io/vant/#/zh-CN/notice-bar
   • Popover（气泡弹出框） https://vant-ui.github.io/vant/#/zh-CN/popover
   • Progress（进度条） https://vant-ui.github.io/vant/#/zh-CN/progress
   • RollingText（翻滚文本） https://vant-ui.github.io/vant/#/zh-CN/rolling-text
   • Skeleton（骨架屏） https://vant-ui.github.io/vant/#/zh-CN/skeleton
   • Steps（步骤条） https://vant-ui.github.io/vant/#/zh-CN/steps
   • Sticky（粘性布局） https://vant-ui.github.io/vant/#/zh-CN/sticky
   • Swipe（轮播） https://vant-ui.github.io/vant/#/zh-CN/swipe
   • Tag（标签） https://vant-ui.github.io/vant/#/zh-CN/tag
   • TextEllipsis（文本省略） https://vant-ui.github.io/vant/#/zh-CN/text-ellipsis
   • Watermark（水印） https://vant-ui.github.io/vant/#/zh-CN/watermark
5. Navigation（导航组件）
   • ActionBar（动作栏） https://vant-ui.github.io/vant/#/zh-CN/action-bar
   • BackTop（回到顶部） https://vant-ui.github.io/vant/#/zh-CN/back-top
   • Grid（宫格） https://vant-ui.github.io/vant/#/zh-CN/grid
   • IndexBar（索引栏） https://vant-ui.github.io/vant/#/zh-CN/index-bar
   • NavBar（导航栏） https://vant-ui.github.io/vant/#/zh-CN/nav-bar
   • Pagination（分页） https://vant-ui.github.io/vant/#/zh-CN/sidebar
   • Sidebar（侧边导航） https://vant-ui.github.io/vant/#/zh-CN/sidebar
   • Tab（标签页） https://vant-ui.github.io/vant/#/zh-CN/tab
   • Tabbar（标签栏） https://vant-ui.github.io/vant/#/zh-CN/tabbar
   • TreeSelect（分类选择） https://vant-ui.github.io/vant/#/zh-CN/tree-select
6. Business（业务组件）
   • AddressEdit（地址编辑） https://vant-ui.github.io/vant/#/zh-CN/address-edit
   • AddressList（地址列表） https://vant-ui.github.io/vant/#/zh-CN/address-list
   • Area（省市区选择） https://vant-ui.github.io/vant/#/zh-CN/area
   • Card（商品卡片） https://vant-ui.github.io/vant/#/zh-CN/card
   • ContactCard（联系人卡片） https://vant-ui.github.io/vant/#/zh-CN/contact-card
   • ContactEdit（联系人编辑） https://vant-ui.github.io/vant/#/zh-CN/contact-edit
   • ContactList（联系人列表） https://vant-ui.github.io/vant/#/zh-CN/contact-list
   • Coupon（优惠券） https://vant-ui.github.io/vant/#/zh-CN/coupon-list
   • SubmitBar（提交订单栏） https://vant-ui.github.io/vant/#/zh-CN/submit-bar

Tailwind CSS组件

1. Marketing
   • Page Section 页面部分
   • Hero Sections 英雄板块 https://tailwindui.com/components/marketing/sections/heroes
   • Feature Sections 特色板块 https://tailwindui.com/components/marketing/sections/feature-sections
   • CTA Sections CTA板块 https://tailwindui.com/components/marketing/sections/cta-sections
   • Bento Grids 便当网格 https://tailwindui.com/components/marketing/sections/bento-grids
   • Pricing Sections 价格板块 https://tailwindui.com/components/marketing/sections/pricing
   • Header Sections 头部板块 https://tailwindui.com/components/marketing/sections/header
   • Newsletter Sections 新闻通讯板块 https://tailwindui.com/components/marketing/sections/newsletter-sections
   • Stats 统计数据 https://tailwindui.com/components/marketing/sections/stats-sections
   • Testimonials 客户评价 https://tailwindui.com/components/marketing/sections/testimonials
   • Blog Sections 博客板块 https://tailwindui.com/components/marketing/sections/blog-sections
   • Contact Sections 接触板块 https://tailwindui.com/components/marketing/sections/contact-sections
   • Team Sections 团队板块 https://tailwindui.com/components/marketing/sections/team-sections
   • Content Sections 内容板块 https://tailwindui.com/components/marketing/sections/content-sections
   • Logo Clouds 标志云 https://tailwindui.com/components/marketing/sections/logo-clouds
   • FAQs 常见问题解答 https://tailwindui.com/components/marketing/sections/faq-sections
   • Footers 页脚 https://tailwindui.com/components/marketing/sections/footers
   • Elements 元件
   • Headers 页眉 https://tailwindui.com/components/marketing/elements/headers
   • Flyout Menus 弹出菜单 https://tailwindui.com/components/marketing/elements/flyout-menus
   • Banners 横幅广告 https://tailwindui.com/components/marketing/elements/banners
   • Feedback 反馈
   • 404 Pages 404页面 https://tailwindui.com/components/marketing/feedback/404-pages
   • Page Examples 页面示例
   • Landing Pages 登录页面 https://tailwindui.com/components/marketing/page-examples/landing-pages
   • Pricing Pages 定价页面 https://tailwindui.com/components/marketing/page-examples/pricing-pages
   • About Pages 关于页面 https://tailwindui.com/components/marketing/page-examples/about-pages
2. Application UI
   • Application Shells 应用程序外观
   • Stacked Layouts 堆叠布局 https://tailwindui.com/components/application-ui/application-shells/stacked
   • Sidebar Layouts 提要字段版面配置 https://tailwindui.com/components/application-ui/application-shells/sidebar
   • Multi-Column Layouts 多栏布局 https://tailwindui.com/components/application-ui/application-shells/multi-column
   • Headings 标题
   • Page Headings 页面标题 https://tailwindui.com/components/application-ui/headings/page-headings
   • Card Headings 卡片标题 https://tailwindui.com/components/application-ui/headings/card-headings
   • Section Headings 章节标题 https://tailwindui.com/components/application-ui/headings/section-headings
   • Data Display 数据显示
   • Description Lists 描述列表 https://tailwindui.com/components/application-ui/data-display/description-lists
   • Stats 统计数据 https://tailwindui.com/components/application-ui/data-display/stats
   • Calendars 日历 https://tailwindui.com/components/application-ui/data-display/calendars
   • Lists 列出
   • Stacked Lists 堆叠列表 https://tailwindui.com/components/application-ui/lists/stacked-lists
   • Tables 表 https://tailwindui.com/components/application-ui/lists/tables
   • Grid Lists 网格列出 https://tailwindui.com/components/application-ui/lists/grid-lists
   • Feeds 提要 https://tailwindui.com/components/application-ui/lists/feeds
   • Forms 形式
   • Form Layouts 表单布局 https://tailwindui.com/components/application-ui/forms/form-layouts
   • Input Groups 输入组 https://tailwindui.com/components/application-ui/forms/input-groups
   • Select Menus 选择菜单 https://tailwindui.com/components/application-ui/forms/select-menus
   • Sign-in and Registration 登录和注册 https://tailwindui.com/components/application-ui/forms/sign-in-forms
   • Text areas 文本区域 https://tailwindui.com/components/application-ui/forms/textareas
   • Radio Groups 无线电群组 https://tailwindui.com/components/application-ui/forms/radio-groups
   • Checkboxes 复选框 https://tailwindui.com/components/application-ui/forms/checkboxes
   • Toggles 切换 https://tailwindui.com/components/application-ui/forms/toggles
   • Action Panels 行动小组 https://tailwindui.com/components/application-ui/forms/action-panels
   • Comboboxes 组合框 https://tailwindui.com/components/application-ui/forms/comboboxes
   • Feedback 反馈
   • Alerts 警报 https://tailwindui.com/components/application-ui/feedback/alerts
   • Empty States 空态 https://tailwindui.com/components/application-ui/feedback/empty-states
   • Navigation 导航
   • Navbars 导航栏组件 https://tailwindui.com/components/application-ui/navigation/navbars
   • Pagination 分页 https://tailwindui.com/components/application-ui/navigation/pagination
   • Tabs 选项卡 https://tailwindui.com/components/application-ui/navigation/tabs
   • Vertical Navigation 垂直导航 https://tailwindui.com/components/application-ui/navigation/vertical-navigation
   • Sidebar Navigation 侧边栏导航 https://tailwindui.com/components/application-ui/navigation/sidebar-navigation
   • Breadcrumbs 面包屑 https://tailwindui.com/components/application-ui/navigation/breadcrumbs
   • Progress Bars 进度条 https://tailwindui.com/components/application-ui/navigation/progress-bars
   • Command Palettes 命令选项板 https://tailwindui.com/components/application-ui/navigation/command-palettes
   • Overlays 覆盖
   • Modal Dialogs 模态对话框 https://tailwindui.com/components/application-ui/overlays/modal-dialogs
   • Drawers 抽屉 https://tailwindui.com/components/application-ui/overlays/drawers
   • Notifications 通知 https://tailwindui.com/components/application-ui/overlays/notifications
   • Elements 元件
   • Avatars 头像 https://tailwindui.com/components/application-ui/elements/avatars
   • Badges 徽章 https://tailwindui.com/components/application-ui/elements/badges
   • Dropdowns 下拉菜单 https://tailwindui.com/components/application-ui/elements/dropdowns
   • Buttons 按钮 https://tailwindui.com/components/application-ui/elements/buttons
   • Button Groups 按钮组 https://tailwindui.com/components/application-ui/elements/button-groups
   • Layout 布局
   • Containers 容器 https://tailwindui.com/components/application-ui/layout/containers
   • Cards 卡 https://tailwindui.com/components/application-ui/layout/cards
   • List containers 列表容器 https://tailwindui.com/components/application-ui/layout/list-containers
   • Media Objects 媒体对象 https://tailwindui.com/components/application-ui/layout/media-objects
   • Dividers 分隔器 https://tailwindui.com/components/application-ui/layout/dividers
   • Page Examples 页面示例
   • Home Screens 主屏幕 https://tailwindui.com/components/application-ui/page-examples/home-screens
   • Detail Screens 细节屏幕 https://tailwindui.com/components/application-ui/page-examples/detail-screens
   • Settings Screens 设置屏面 https://tailwindui.com/components/application-ui/page-examples/settings-screens
3. Ecommerce
   • Components 组件
   • Product Overviews 产品概述 https://tailwindui.com/components/ecommerce/components/product-overviews
   • Product Lists 产品清单 https://tailwindui.com/components/ecommerce/components/product-lists
   • Category Previews 类别预览 https://tailwindui.com/components/ecommerce/components/category-previews
   • Shopping Carts 购物车 https://tailwindui.com/components/ecommerce/components/shopping-carts
   • Category Filters 类别过滤器 https://tailwindui.com/components/ecommerce/components/category-filters
   • Product Quickviews 产品快速浏览 https://tailwindui.com/components/ecommerce/components/product-quickviews
   • Product Features 产品功能 https://tailwindui.com/components/ecommerce/components/product-features
   • Store Navigation 存储导航 https://tailwindui.com/components/ecommerce/components/store-navigation
   • Promo Sections 促销部分 https://tailwindui.com/components/ecommerce/components/promo-sections
   • Checkout Forms 结账表格 https://tailwindui.com/components/ecommerce/components/checkout-forms
   • Reviews 评论 https://tailwindui.com/components/ecommerce/components/reviews
   • Order Summaries 订单汇总 https://tailwindui.com/components/ecommerce/components/order-summaries
   • Order History 订单历史 https://tailwindui.com/components/ecommerce/components/order-history
   • Incentives 激励 https://tailwindui.com/components/ecommerce/components/incentives
   • Page Examples 页面示例
   • Storefront Pages 店面页面 https://tailwindui.com/components/ecommerce/page-examples/storefront-pages
   • Product Pages 产品页面 https://tailwindui.com/components/ecommerce/page-examples/product-pages
   • Category Pages 类别页面 https://tailwindui.com/components/ecommerce/page-examples/category-pages
   • Shopping Cart Pages 购物车页面 https://tailwindui.com/components/ecommerce/page-examples/shopping-cart-pages
   • Checkout Pages 结账页面 https://tailwindui.com/components/ecommerce/page-examples/checkout-pages
   • Order Detail Pages 订单详细信息页面 https://tailwindui.com/components/ecommerce/page-examples/order-detail-pages
   • Order History Pages 订单历史页面 https://tailwindui.com/components/ecommerce/page-examples/order-history-pages

ScriptEcho整理组件集合

1. 2D/3D/XR组件
   • @egjs/view3d组件 https://naver.github.io/egjs-view3d/docs
   • 3Dmol.js https://3dmol.org/doc/
   • potree组件 https://github.com/potree/potree/
   • three.js组件 https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
   • pixijs https://pixijs.com/8.x/tutorials/getting-started#1
   • two.js https://two.js.org/examples/#official-examples
   • Matter.js https://github.com/liabru/matter-js/tree/master/examples
   • PlayCanvasEngine https://developer.playcanvas.com/user-manual/
   • vue-3d-model组件 https://gitee.com/happinessllw/vue-3d-model
2. AntV组件
   • antvs2组件 https://s2.antv.antgroup.com/manual/introduction
   • antvx6组件 https://x6.antv.vision/zh/docs/tutorial/about
   • antvl7组件 https://www.yuque.com/antv/l7/wyb66y
   • antvg6组件 https://www.yuque.com/antv/g6/intro
   • antvg2组件 https://www.yuque.com/antv/g2-docs/get-started
   • antvf2组件 https://www.yuque.com/antv/f2/grammar
   • antv/f6组件 https://f6.antv.vision/zh/docs/manual/introduction/
3. 地图组件
   • https://ivan-94.github.io/react-bdmap/#/%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B
   • inmap https://fengluhome.github.io/inmap-doc/#/docs/v2/introduce
4. 动画组件
   • AnimeJS组件 https://animejs.com/documentation/#cssSelector
   • vue3-lottie组件 https://gitee.com/xilong008/vue-lottie/#wapper-of-bodymovinjs
   • p5.js https://p5js.org/tutorials/
5. 企业协作组件
   • @xpyjs/gantt组件 https://xpyjs.github.io/gantt/docs/root.html
   • gantt-schedule-timeline-calendar组件 https://gitee.com/endfalse/gantt-schedule-timeline-calendar#install
6. 音视频组件
   • jessibuca.js组件 https://jessibuca.com/document.html
   • vidstack/vue组件 https://www.vidstack.io/docs/player/getting-started/installation?styling=default-layout&provider=video
   • vue-record-audio组件 https://www.npmjs.com/package/vue-record-audio
7. 在线文档组件
   • CodeMirror组件 https://codemirror.net/docs/guide/
   • drauu组件 https://github.com/antfu/drauu
   • mind-elixir组件 https://mind-elixir.com/docs/getting-started/quick-start
   • tinymce组件 https://www.tiny.cloud/docs/tinymce/latest/basic-setup/
   • tiptap组件 https://tiptap.dev/docs/editor/getting-started/install
   • Univer组件 https://univer.ai/zh-CN/guides/sheet/getting-started/quickstart
   • vue-office组件 https://501351981.github.io/vue-office/examples/docs/config/
   • WangEditor组件 https://www.wangeditor.com/v5/getting-started.html
   • vue-markdown-it https://freedomevenden.com/projects/vue-markdown-it#usage
8. 拓扑图
   • Cytoscape.js https://js.cytoscape.org/#getting-started
   • neovis.js https://github.com/neo4j-contrib/neovis.js
   • WebCola https://github.com/tgdwyer/WebCola/tree/master/website/examples
9. 图形组件
   • BPMN.js https://bpmn.io/toolkit/bpmn-js/walkthrough/
   • JSXGraph https://jsxgraph.org/wp/docs/index.html
   • LiteGraph.js https://github.com/jagenjo/litegraph.js
   • Rough.js https://roughjs.com/
10. 图形处理
    • OpenCV.js https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html
    • WASM-ImageMagick https://github.com/ImageMagick/ImageMagick
11. 其他
    • uiverse卡片 https://uiverse.io/elements
    • WebSight1 https://docs.websight.io/cms/quick-start/
    • WebSight2 https://docs.websight.io/cms/quick-start/
    • 人工智能组件 https://www.llama.com/docs/how-to-guides/
    • ECharts图表 https://echarts.apache.org/zh/option.html#title