mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 09:08:51 +08:00
docs: ✏️ 文档优化增加对安装配置的介绍
This commit is contained in:
xuqingkai
parent
1b866c062e
commit
572db8c9ee
46
README.md
46
README.md
@ -6,44 +6,56 @@
|
||||
<p align="center">📱 一个参照<a href="https://ftf.jd.com/wot-design/">Wot-design</a>，基于 Vue3 打造的uni-app组件库</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
|
||||
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/Moonofweisheng/wot-design-uni">
|
||||
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Moonofweisheng/wot-design-uni?logo=github&color=%234d80f0&link=https%3A%2F%2Fgithub.com%2FMoonofweisheng%2Fwot-design-uni">
|
||||
</a>
|
||||
|
||||
<a href="https://www.npmjs.com/package/wot-design-uni">
|
||||
<img alt="npm" src="https://img.shields.io/npm/v/wot-design-uni?logo=npm&color=%234d80f0&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
|
||||
</a>
|
||||
|
||||
<a href="https://www.npmjs.com/package/wot-design-uni">
|
||||
<img alt="npm" src="https://img.shields.io/npm/dw/wot-design-uni?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
|
||||
</a>
|
||||
|
||||
<a href="https://www.npmjs.com/package/wot-design-uni">
|
||||
<img src="https://img.shields.io/npm/dt/wot-design-uni?style=flat-square">
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/Moonofweisheng/wot-design-uni">
|
||||
<img alt="GitHub" src="https://img.shields.io/github/license/Moonofweisheng/wot-design-uni?logo=github">
|
||||
</a>
|
||||
|
||||
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
|
||||
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
|
||||
</a>
|
||||
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
|
||||
</p>
|
||||
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
- 🚀 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台.
|
||||
- 🚀 支持 APP、H5、微信小程序 等平台.
|
||||
- 🚀 50+ 个高质量组件，覆盖移动端主流场景.
|
||||
- 💪 使用 Typescript 构建，提供良好的组件类型系统.
|
||||
- 💪 采用 Vue3 最新特性，提升组件性能.
|
||||
- 📖 提供丰富的文档和组件示例.
|
||||
- 🎨 支持主题定制，可以定制scss变量以及组件的样式自定义.
|
||||
- 🎨 支持主题定制，可以定制 scss 变量以及组件的样式自定义.
|
||||
- 🍭 支持暗黑模式
|
||||
|
||||
## 📱 预览
|
||||
|
||||
手机扫描上的二维码访问演示：
|
||||
|
||||
|
||||
扫描二维码访问演示：
|
||||
|
||||
<p>
|
||||
<img src="https://wot-design-uni.netlify.app/wx.jpg" width="200" height="200" style="margin-right:30px"/>
|
||||
<img src="https://wot-design-uni.netlify.app/alipay.png" width="200" height="200" />
|
||||
</p>
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
yarn add wot-design-uni
|
||||
```
|
||||
|
||||
## 快速上手
|
||||
|
||||
详细说明见 [快速上手](https://wot-design-uni.netlify.app/guide/quickUse.html)
|
||||
@ -51,5 +63,3 @@ yarn add wot-design-uni
|
||||
## LICENSE
|
||||
|
||||
[MIT](https://github.com/Moonofweisheng/wot-design-uni/blob/develop/LICENSE)
|
||||
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-07-27 10:26:09
|
||||
* @LastEditTime: 2023-08-01 17:31:40
|
||||
* @LastEditTime: 2023-08-22 19:02:54
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\docs\.vitepress\config.ts
|
||||
@ -26,8 +26,8 @@ export default defineConfig({
|
||||
],
|
||||
themeConfig: {
|
||||
logo: '/wot-design.png',
|
||||
lastUpdated:{
|
||||
text:'最后更新'
|
||||
lastUpdated: {
|
||||
text: '最后更新'
|
||||
},
|
||||
editLink: {
|
||||
pattern: 'https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path',
|
||||
@ -35,6 +35,7 @@ export default defineConfig({
|
||||
},
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/Moonofweisheng/wot-design-uni' },
|
||||
{ icon: { svg: '<svg t="1692699544299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4184" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#6D6D72" p-id="4185"></path></svg>' }, link: "https://gitee.com/fant-mini/wot-design-uni", ariaLabel: 'Gitee' }
|
||||
],
|
||||
search: {
|
||||
provider: 'algolia',
|
||||
@ -45,33 +46,13 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
|
||||
// carbonAds: {
|
||||
// code: 'CEBIEK3N',
|
||||
// placement: 'vitejsdev',
|
||||
// },
|
||||
|
||||
footer: {
|
||||
message: `Released under the MIT License.`,
|
||||
copyright: 'Copyright © 2023-present weisheng',
|
||||
},
|
||||
nav: [
|
||||
{ text: '指南', link: '/guide/quickUse', activeMatch: '/guide/' },
|
||||
{ text: '组件', link: '/component/button', activeMatch: '/component/' },
|
||||
{ text: '捐赠作者', link: '/reward/reward', activeMatch: '/reward/' },
|
||||
|
||||
{
|
||||
text: '相关链接',
|
||||
items: [
|
||||
{ text: 'uni-mini-router', link: 'https://gitee.com/fant-mini/uni-mini-router' },
|
||||
{ text: 'uni-mini-ci', link: 'https://gitee.com/fant-mini/uni-mini-ci' },
|
||||
{ text: 'fant-mini-plus', link: 'https://fant-mini-plus.top/fant-mini-plus/' },
|
||||
{ text:'wot-design', link:'https://ftf.jd.com/wot-design/' },
|
||||
{ text:'wot-design-mini', link:'https://ftf.jd.com/wot-design-mini/' }
|
||||
],
|
||||
},
|
||||
],
|
||||
sidebar:{
|
||||
'/guide/': [
|
||||
text: '指南', activeMatch: '/guide/', items: [
|
||||
{
|
||||
text: '介绍',
|
||||
link: '/guide/introduction',
|
||||
@ -96,198 +77,261 @@ export default defineConfig({
|
||||
text: '常见问题',
|
||||
link: '/guide/commonProblems',
|
||||
}
|
||||
],
|
||||
'/reward/': [
|
||||
{
|
||||
text: '捐赠作者',
|
||||
link: '/reward/reward',
|
||||
},
|
||||
{
|
||||
text: '榜上有名',
|
||||
link: '/reward/donor',
|
||||
},
|
||||
],
|
||||
|
||||
'/component/': [
|
||||
{
|
||||
text: '基础',
|
||||
items: [
|
||||
{
|
||||
link: "/component/button",
|
||||
text: "Button 按钮"
|
||||
}, {
|
||||
link: "/component/icon",
|
||||
text: "Icon 图标"
|
||||
}, {
|
||||
link: "/component/layout",
|
||||
text: "Layout 布局"
|
||||
}, {
|
||||
link: "/component/configProvider",
|
||||
text: "ConfigProvider 全局配置"
|
||||
},{
|
||||
link: "/component/popup",
|
||||
text: "Popup 弹出层"
|
||||
}, {
|
||||
link: "/component/resize",
|
||||
text: "Resize 监听元素尺寸变化"
|
||||
}, {
|
||||
link: "/component/transition",
|
||||
text: "Transition 动画"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
text: "导航",
|
||||
items: [{
|
||||
link: "/component/pagination",
|
||||
text: "Pagination 分页"
|
||||
}, {
|
||||
link: "/component/popover",
|
||||
text: "Popover 气泡"
|
||||
}, {
|
||||
link: "/component/tabs",
|
||||
text: "Tabs 标签页"
|
||||
}]
|
||||
}, {
|
||||
|
||||
text: "数据输入",
|
||||
items: [{
|
||||
link: "/component/calendar",
|
||||
text: "Calendar 日历选择器"
|
||||
}, {
|
||||
link: "/component/calendarView",
|
||||
text: "CalendarView 日历面板"
|
||||
}, {
|
||||
link: "/component/checkbox",
|
||||
text: "Checkbox 复选框"
|
||||
}, {
|
||||
link: "/component/colPicker",
|
||||
text: "ColPicker 多列选择器"
|
||||
}, {
|
||||
link: "/component/datetimePicker",
|
||||
text: "DatetimePicker 时间选择器"
|
||||
}, {
|
||||
link: "/component/datetimePickerView",
|
||||
text: "DatetimePickerView 时间选择器视图"
|
||||
}, {
|
||||
link: "/component/form",
|
||||
text: "Form 表单组合"
|
||||
}, {
|
||||
link: "/component/input",
|
||||
text: "Input 输入框"
|
||||
}, {
|
||||
link: "/component/inputNumber",
|
||||
text: "InputNumber 计数器"
|
||||
}, {
|
||||
link: "/component/picker",
|
||||
text: "Picker 选择器"
|
||||
}, {
|
||||
link: "/component/pickerView",
|
||||
text: "PickerView 选择器视图"
|
||||
}, {
|
||||
link: "/component/radio",
|
||||
text: "Radio 单选框"
|
||||
}, {
|
||||
link: "/component/rate",
|
||||
text: "Rate 评分"
|
||||
}, {
|
||||
link: "/component/search",
|
||||
text: "Search 搜索框"
|
||||
}, {
|
||||
link: "/component/selectPicker",
|
||||
text: "SelectPicker 单复选选择器"
|
||||
}, {
|
||||
link: "/component/slider",
|
||||
text: "Slider 滑块"
|
||||
}, {
|
||||
link: "/component/switch",
|
||||
text: "Switch 开关"
|
||||
}, {
|
||||
link: "/component/upload",
|
||||
text: "Upload 上传"
|
||||
}]
|
||||
}, {
|
||||
text: "反馈",
|
||||
items: [{
|
||||
link: "/component/actionSheet",
|
||||
text: "ActionSheet 动作面板"
|
||||
}, {
|
||||
link: "/component/dropMenu",
|
||||
text: "DropMenu 下拉菜单"
|
||||
}, {
|
||||
link: "/component/loading",
|
||||
text: "Loading 加载"
|
||||
}, {
|
||||
link: "/component/messageBox",
|
||||
text: "MessageBox 弹框"
|
||||
}, {
|
||||
link: "/component/noticeBar",
|
||||
text: "NoticeBar 通知栏"
|
||||
}, {
|
||||
link: "/component/progress",
|
||||
text: "Progress 进度条"
|
||||
}, {
|
||||
link: "/component/sortButton",
|
||||
text: "SortButton 排序按钮"
|
||||
}, {
|
||||
link: "/component/statusTip",
|
||||
text: "StatusTip 缺省提示"
|
||||
}, {
|
||||
link: "/component/swipeAction",
|
||||
text: "SwipeAction 滑动操作"
|
||||
}, {
|
||||
link: "/component/toast",
|
||||
text: "Toast 轻提示"
|
||||
}, {
|
||||
link: "/component/tooltip",
|
||||
text: "Tooltip 文字提示"
|
||||
}]
|
||||
}, {
|
||||
|
||||
text: "数据展示",
|
||||
items: [{
|
||||
link: "/component/badge",
|
||||
text: "Badge 角标"
|
||||
}, {
|
||||
link: "/component/card",
|
||||
text: "Card 卡片"
|
||||
}, {
|
||||
link: "/component/cell",
|
||||
text: "Cell 单元格"
|
||||
}, {
|
||||
link: "/component/collapse",
|
||||
text: "Collapse 折叠面板"
|
||||
}, {
|
||||
link: "/component/curtain",
|
||||
text: "Curtain 幕帘"
|
||||
}, {
|
||||
link: "/component/divider",
|
||||
text: "Divider 分割线"
|
||||
}, {
|
||||
link: "/component/img",
|
||||
text: "Img 图片"
|
||||
}, {
|
||||
link: "/component/imgCropper",
|
||||
text: "ImgCropper 图片裁剪"
|
||||
}, {
|
||||
link: "/component/grid",
|
||||
text: "Grid 宫格"
|
||||
}, {
|
||||
link: "/component/loadmore",
|
||||
text: "Loadmore 加载更多"
|
||||
}, {
|
||||
link: "/component/steps",
|
||||
text: "Steps 步骤条"
|
||||
}, {
|
||||
link: "/component/sticky",
|
||||
text: "Sticky 粘性布局"
|
||||
}, {
|
||||
link: "/component/tag",
|
||||
text: "Tag 标签"
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '组件', activeMatch: '/component/', items: [
|
||||
{
|
||||
text: '基础组件',
|
||||
link: "/component/button",
|
||||
},
|
||||
{
|
||||
text: "导航组件",
|
||||
link: "/component/pagination"
|
||||
}, {
|
||||
text: "数据输入",
|
||||
link: "/component/calendar",
|
||||
}, {
|
||||
text: "反馈组件",
|
||||
link: "/component/actionSheet",
|
||||
}, {
|
||||
text: "数据展示",
|
||||
link: "/component/badge",
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{ text: '捐赠作者', link: '/reward/reward', activeMatch: '/reward/' },
|
||||
|
||||
{
|
||||
text: '相关链接',
|
||||
items: [
|
||||
{ text: 'uni-mini-router', link: 'https://gitee.com/fant-mini/uni-mini-router' },
|
||||
{ text: 'uni-mini-ci', link: 'https://gitee.com/fant-mini/uni-mini-ci' },
|
||||
{ text: 'fant-mini-plus', link: 'https://fant-mini-plus.top/fant-mini-plus/' },
|
||||
{ text: 'wot-design', link: 'https://ftf.jd.com/wot-design/' },
|
||||
{ text: 'wot-design-mini', link: 'https://ftf.jd.com/wot-design-mini/' }
|
||||
],
|
||||
},
|
||||
],
|
||||
sidebar: {
|
||||
'/guide/': [
|
||||
{
|
||||
text: '介绍',
|
||||
link: '/guide/introduction',
|
||||
},
|
||||
{
|
||||
text: '快速上手',
|
||||
link: '/guide/quickUse',
|
||||
},
|
||||
{
|
||||
text: '定制主题',
|
||||
link: '/guide/customTheme',
|
||||
},
|
||||
{
|
||||
text: '字体',
|
||||
link: '/guide/typography',
|
||||
},
|
||||
{
|
||||
text: '更新日志',
|
||||
link: '/guide/changelog',
|
||||
},
|
||||
{
|
||||
text: '常见问题',
|
||||
link: '/guide/commonProblems',
|
||||
}
|
||||
],
|
||||
'/reward/': [
|
||||
{
|
||||
text: '捐赠作者',
|
||||
link: '/reward/reward',
|
||||
},
|
||||
{
|
||||
text: '榜上有名',
|
||||
link: '/reward/donor',
|
||||
},
|
||||
],
|
||||
|
||||
'/component/': [
|
||||
{
|
||||
text: '基础',
|
||||
items: [
|
||||
{
|
||||
link: "/component/button",
|
||||
text: "Button 按钮"
|
||||
}, {
|
||||
link: "/component/icon",
|
||||
text: "Icon 图标"
|
||||
}, {
|
||||
link: "/component/layout",
|
||||
text: "Layout 布局"
|
||||
}, {
|
||||
link: "/component/configProvider",
|
||||
text: "ConfigProvider 全局配置"
|
||||
}, {
|
||||
link: "/component/popup",
|
||||
text: "Popup 弹出层"
|
||||
}, {
|
||||
link: "/component/resize",
|
||||
text: "Resize 监听元素尺寸变化"
|
||||
}, {
|
||||
link: "/component/transition",
|
||||
text: "Transition 动画"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
text: "导航",
|
||||
items: [{
|
||||
link: "/component/pagination",
|
||||
text: "Pagination 分页"
|
||||
}, {
|
||||
link: "/component/popover",
|
||||
text: "Popover 气泡"
|
||||
}, {
|
||||
link: "/component/tabs",
|
||||
text: "Tabs 标签页"
|
||||
}]
|
||||
}, {
|
||||
|
||||
text: "数据输入",
|
||||
items: [{
|
||||
link: "/component/calendar",
|
||||
text: "Calendar 日历选择器"
|
||||
}, {
|
||||
link: "/component/calendarView",
|
||||
text: "CalendarView 日历面板"
|
||||
}, {
|
||||
link: "/component/checkbox",
|
||||
text: "Checkbox 复选框"
|
||||
}, {
|
||||
link: "/component/colPicker",
|
||||
text: "ColPicker 多列选择器"
|
||||
}, {
|
||||
link: "/component/datetimePicker",
|
||||
text: "DatetimePicker 时间选择器"
|
||||
}, {
|
||||
link: "/component/datetimePickerView",
|
||||
text: "DatetimePickerView 时间选择器视图"
|
||||
}, {
|
||||
link: "/component/form",
|
||||
text: "Form 表单组合"
|
||||
}, {
|
||||
link: "/component/input",
|
||||
text: "Input 输入框"
|
||||
}, {
|
||||
link: "/component/inputNumber",
|
||||
text: "InputNumber 计数器"
|
||||
}, {
|
||||
link: "/component/picker",
|
||||
text: "Picker 选择器"
|
||||
}, {
|
||||
link: "/component/pickerView",
|
||||
text: "PickerView 选择器视图"
|
||||
}, {
|
||||
link: "/component/radio",
|
||||
text: "Radio 单选框"
|
||||
}, {
|
||||
link: "/component/rate",
|
||||
text: "Rate 评分"
|
||||
}, {
|
||||
link: "/component/search",
|
||||
text: "Search 搜索框"
|
||||
}, {
|
||||
link: "/component/selectPicker",
|
||||
text: "SelectPicker 单复选选择器"
|
||||
}, {
|
||||
link: "/component/slider",
|
||||
text: "Slider 滑块"
|
||||
}, {
|
||||
link: "/component/switch",
|
||||
text: "Switch 开关"
|
||||
}, {
|
||||
link: "/component/upload",
|
||||
text: "Upload 上传"
|
||||
}]
|
||||
}, {
|
||||
text: "反馈",
|
||||
items: [{
|
||||
link: "/component/actionSheet",
|
||||
text: "ActionSheet 动作面板"
|
||||
}, {
|
||||
link: "/component/dropMenu",
|
||||
text: "DropMenu 下拉菜单"
|
||||
}, {
|
||||
link: "/component/loading",
|
||||
text: "Loading 加载"
|
||||
}, {
|
||||
link: "/component/messageBox",
|
||||
text: "MessageBox 弹框"
|
||||
}, {
|
||||
link: "/component/noticeBar",
|
||||
text: "NoticeBar 通知栏"
|
||||
}, {
|
||||
link: "/component/progress",
|
||||
text: "Progress 进度条"
|
||||
}, {
|
||||
link: "/component/sortButton",
|
||||
text: "SortButton 排序按钮"
|
||||
}, {
|
||||
link: "/component/statusTip",
|
||||
text: "StatusTip 缺省提示"
|
||||
}, {
|
||||
link: "/component/swipeAction",
|
||||
text: "SwipeAction 滑动操作"
|
||||
}, {
|
||||
link: "/component/toast",
|
||||
text: "Toast 轻提示"
|
||||
}, {
|
||||
link: "/component/tooltip",
|
||||
text: "Tooltip 文字提示"
|
||||
}]
|
||||
}, {
|
||||
|
||||
text: "数据展示",
|
||||
items: [{
|
||||
link: "/component/badge",
|
||||
text: "Badge 角标"
|
||||
}, {
|
||||
link: "/component/card",
|
||||
text: "Card 卡片"
|
||||
}, {
|
||||
link: "/component/cell",
|
||||
text: "Cell 单元格"
|
||||
}, {
|
||||
link: "/component/collapse",
|
||||
text: "Collapse 折叠面板"
|
||||
}, {
|
||||
link: "/component/curtain",
|
||||
text: "Curtain 幕帘"
|
||||
}, {
|
||||
link: "/component/divider",
|
||||
text: "Divider 分割线"
|
||||
}, {
|
||||
link: "/component/img",
|
||||
text: "Img 图片"
|
||||
}, {
|
||||
link: "/component/imgCropper",
|
||||
text: "ImgCropper 图片裁剪"
|
||||
}, {
|
||||
link: "/component/grid",
|
||||
text: "Grid 宫格"
|
||||
}, {
|
||||
link: "/component/loadmore",
|
||||
text: "Loadmore 加载更多"
|
||||
}, {
|
||||
link: "/component/steps",
|
||||
text: "Steps 步骤条"
|
||||
}, {
|
||||
link: "/component/sticky",
|
||||
text: "Sticky 粘性布局"
|
||||
}, {
|
||||
link: "/component/tag",
|
||||
text: "Tag 标签"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 介绍
|
||||
|
||||
该组件库基于`uni-app`+`vue3`构建，根据`wot desing mini`的设计规范进行开发，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。
|
||||
`wot-design-uni`组件库基于`vue3`+`Typescript`构建，参照`wot desing`的设计规范进行开发，旨在给开发者提供统一的UI交互，同时提高研发的开发效率。
|
||||
|
||||
## 快速上手
|
||||
|
||||
@ -18,11 +18,15 @@
|
||||
<div style="text-align: center;">支付宝扫码</div>
|
||||
</div>
|
||||
|
||||
## 特性
|
||||
## ✨ 特性
|
||||
|
||||
* 50+ 组件
|
||||
* Vue3 + TypeScript 开发
|
||||
* 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台
|
||||
- 🚀 支持 APP、H5、微信小程序 等平台.
|
||||
- 🚀 50+ 个高质量组件，覆盖移动端主流场景.
|
||||
- 💪 使用 Typescript 构建，提供良好的组件类型系统.
|
||||
- 💪 采用 Vue3 最新特性，提升组件性能.
|
||||
- 📖 提供丰富的文档和组件示例.
|
||||
- 🎨 支持主题定制，可以定制scss变量以及组件的样式自定义.
|
||||
- 🍭 支持暗黑模式
|
||||
|
||||
> 使用Vue3最新特性开发，持续优化体验
|
||||
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
# 快速上手
|
||||
|
||||
本节介绍如何在`uni-app`项目中使用 `Wot Design Uni`
|
||||
本节介绍如何在`uni-app`项目中安装、配置并使用 `Wot Design Uni`。
|
||||
|
||||
## 安装
|
||||
:::warning 关于安装
|
||||
`Wot Design Uni`提供了`uni_modules`和`npm`两种安装方式，按需选择。
|
||||
- 使用`uni_modules`安装无需额外配置，即插即用，但是每次更新组件库需要处理代码差异（一般直接覆盖就可以）。
|
||||
- 使用`npm`安装需要配置`easycom`，更新组件库时无需处理代码差异。
|
||||
:::
|
||||
|
||||
`Wot Design Uni` 支持 uni_modules 规范，已经上架到 uni-app 的插件市场，故我们推荐使用 uni_modules 的方式引入，方便更新。
|
||||
## uni_modules 安装
|
||||
|
||||
在`uni-app插件市场`选择使用`HBuildX`导入，或者选择手动在src目录下创建uni_modules文件夹并将Wot Design Uni解压到uni_modules中，结构如下:
|
||||
`Wot Design Uni` 支持 [uni_modules](https://uniapp.dcloud.net.cn/plugin/uni_modules.html#uni-modules) 规范，已经上架到 uni-app 的插件市场，故我们推荐使用 uni_modules 的方式引入，方便更新。
|
||||
|
||||
在`uni-app插件市场`选择使用`HBuildX`导入，或者选择手动在src目录下创建uni_modules文件夹并将`Wot Design Uni`解压到uni_modules中，结构如下:
|
||||
```
|
||||
- uni_modules
|
||||
- - - wot-design-uni
|
||||
@ -15,8 +21,71 @@
|
||||
下载地址：<a href="https://ext.dcloud.net.cn/plugin?id=13889"><span >wot-design-uni</span></a>
|
||||
|
||||
|
||||
## npm 安装
|
||||
|
||||
::: code-group
|
||||
```bash [npm]
|
||||
npm i wot-design-uni
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add wot-design-uni
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add wot-design-uni
|
||||
```
|
||||
:::
|
||||
|
||||
### 配置easycom
|
||||
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。`easycom`将其精简为一步。
|
||||
只要组件路径符合规范（具体见[easycom](https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)），就可以不用引用、注册，直接在页面中使用。
|
||||
|
||||
:::tip 温馨提醒
|
||||
- uni-app 考虑到编译速度，直接在`pages.json`内修改`easycom`不会触发重新编译，需要改动页面内容触发。
|
||||
- 请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
|
||||
:::
|
||||
|
||||
```JSON
|
||||
// pages.json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
|
||||
}
|
||||
},
|
||||
|
||||
// 此为本身已有的内容
|
||||
"pages": [
|
||||
// ......
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Volar 支持
|
||||
如果您使用 `Volar`，请在 `tsconfig.json` 中通过 `compilerOptions.type` 指定全局组件类型。
|
||||
:::tip
|
||||
cli项目使用`uni_modules`安装无需配置，对`Volar`的支持自动生效，`HbuildX`项目不支持此配置，故此步骤仅在`cli`项目使用`npm`安装时需要配置。
|
||||
:::
|
||||
```json
|
||||
// tsconfig.json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"types": ["wot-design-uni/global.d.ts"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
`Wot Design Uni`的组件支持easycom规范，故可以直接在.vue中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，uni-app平台不支持全局挂载组件，所以```Message```、```Toast```等组件仍需在SFC中显式使用，例如:
|
||||
`Wot Design Uni`安装完成之后，支持easycom规范，故可以直接在SFC中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，`uni-app`平台不支持全局挂载组件，所以```Message```、```Toast```等组件仍需在SFC中显式使用，例如:
|
||||
``` html
|
||||
<wd-toast></wd-toast>
|
||||
```
|
||||
|
||||
:::tip 温馨提醒
|
||||
使用uni_modules 安装时`Wot Design Uni`的组件天然支持`easycom`规范，无需额外配置，而使用npm安装需要自行配置`easycom`。
|
||||
:::
|
||||
|
||||
@ -25,7 +25,7 @@ hero:
|
||||
features:
|
||||
- icon: 🚀
|
||||
title: 多平台覆盖
|
||||
details: 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台。
|
||||
details: 支持 APP、H5、微信小程序 等平台。
|
||||
- icon: 🚀
|
||||
title: 50+ 组件
|
||||
details: 超过50个高质量组件，覆盖移动端主流场景。
|
||||
|
||||
@ -22,7 +22,6 @@
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@vant/touch-emulator"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
|
||||
@ -82,6 +82,7 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.55.0",
|
||||
"@typescript-eslint/parser": "^5.55.0",
|
||||
"@vant/area-data": "^1.4.1",
|
||||
"@vant/touch-emulator": "^1.4.0",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"eslint": "^8.36.0",
|
||||
"eslint-config-prettier": "^8.7.0",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-03-09 19:23:03
|
||||
* @LastEditTime: 2023-06-10 23:01:56
|
||||
* @LastEditTime: 2023-08-22 23:02:46
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\main.ts
|
||||
@ -9,9 +9,13 @@
|
||||
*/
|
||||
import { createSSRApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
// #ifdef H5
|
||||
import '@vant/touch-emulator'
|
||||
// #endif
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.config.warnHandler = () => null
|
||||
// app.config.warnHandler = () => null
|
||||
return {
|
||||
app
|
||||
}
|
||||
|
||||
@ -6,44 +6,56 @@
|
||||
<p align="center">📱 一个参照<a href="https://ftf.jd.com/wot-design/">Wot-design</a>，基于 Vue3 打造的uni-app组件库</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
|
||||
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/Moonofweisheng/wot-design-uni">
|
||||
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Moonofweisheng/wot-design-uni?logo=github&color=%234d80f0&link=https%3A%2F%2Fgithub.com%2FMoonofweisheng%2Fwot-design-uni">
|
||||
</a>
|
||||
|
||||
<a href="https://www.npmjs.com/package/wot-design-uni">
|
||||
<img alt="npm" src="https://img.shields.io/npm/v/wot-design-uni?logo=npm&color=%234d80f0&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
|
||||
</a>
|
||||
|
||||
<a href="https://www.npmjs.com/package/wot-design-uni">
|
||||
<img alt="npm" src="https://img.shields.io/npm/dw/wot-design-uni?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni">
|
||||
</a>
|
||||
|
||||
<a href="https://www.npmjs.com/package/wot-design-uni">
|
||||
<img src="https://img.shields.io/npm/dt/wot-design-uni?style=flat-square">
|
||||
</a>
|
||||
|
||||
<a href="https://github.com/Moonofweisheng/wot-design-uni">
|
||||
<img alt="GitHub" src="https://img.shields.io/github/license/Moonofweisheng/wot-design-uni?logo=github">
|
||||
</a>
|
||||
|
||||
<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
|
||||
<img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
|
||||
</a>
|
||||
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>
|
||||
</p>
|
||||
|
||||
|
||||
## ✨ 特性
|
||||
|
||||
- 🚀 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台.
|
||||
- 🚀 支持 APP、H5、微信小程序 等平台.
|
||||
- 🚀 50+ 个高质量组件，覆盖移动端主流场景.
|
||||
- 💪 使用 Typescript 构建，提供良好的组件类型系统.
|
||||
- 💪 采用 Vue3 最新特性，提升组件性能.
|
||||
- 📖 提供丰富的文档和组件示例.
|
||||
- 🎨 支持主题定制，可以定制scss变量以及组件的样式自定义.
|
||||
- 🎨 支持主题定制，可以定制 scss 变量以及组件的样式自定义.
|
||||
- 🍭 支持暗黑模式
|
||||
|
||||
## 📱 预览
|
||||
|
||||
手机扫描上的二维码访问演示：
|
||||
|
||||
|
||||
扫描二维码访问演示：
|
||||
|
||||
<p>
|
||||
<img src="https://wot-design-uni.netlify.app/wx.jpg" width="200" height="200" style="margin-right:30px"/>
|
||||
<img src="https://wot-design-uni.netlify.app/alipay.png" width="200" height="200" />
|
||||
</p>
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
yarn add wot-design-uni
|
||||
```
|
||||
|
||||
## 快速上手
|
||||
|
||||
详细说明见 [快速上手](https://wot-design-uni.netlify.app/guide/quickUse.html)
|
||||
@ -51,5 +63,3 @@ yarn add wot-design-uni
|
||||
## LICENSE
|
||||
|
||||
[MIT](https://github.com/Moonofweisheng/wot-design-uni/blob/develop/LICENSE)
|
||||
|
||||
|
||||
|
||||
@ -3084,6 +3084,11 @@
|
||||
resolved "https://registry.npmmirror.com/@vant/area-data/-/area-data-1.4.1.tgz#b4f1bce05dbb147dc08fd2ed9b2a0f63d3329b29"
|
||||
integrity sha512-D8zI/rfxREhnIKGoYzsEJZ73fte4JARhFeFftLIH7ynu1sPrCBEgPkLEbwPyvw3VC4JdSIuzaK5uOhu+BcoPXw==
|
||||
|
||||
"@vant/touch-emulator@^1.4.0":
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/@vant/touch-emulator/-/touch-emulator-1.4.0.tgz#02420ca5f312a7eb6c36c349cbb8e80e6f29ff2f"
|
||||
integrity sha512-Zt+zISV0+wpOew2S1siOJ3G22y+hapHAKmXM+FhpvWzsRc4qahaYXatCAITuuXt0EcDp7WvEeTO4F7p9AtX/pw==
|
||||
|
||||
"@vitejs/plugin-legacy@^4.0.3":
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@vitejs/plugin-legacy/-/plugin-legacy-4.1.1.tgz#27aad7ab082d2d554cf48a8e4f1c0ae9f3eca522"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user