diff --git a/README.md b/README.md index 4151f6f1..e919938b 100644 --- a/README.md +++ b/README.md @@ -6,44 +6,56 @@

📱 一个参照Wot-design,基于 Vue3 打造的uni-app组件库

- - deploy-status - + + + GitHub Repo stars + + + + npm + + + + npm + + + + + + + + GitHub + + + + deploy-status + +

🔥 文档网站 (Netlify)

- ## ✨ 特性 -- 🚀 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台. +- 🚀 支持 APP、H5、微信小程序 等平台. - 🚀 50+ 个高质量组件,覆盖移动端主流场景. - 💪 使用 Typescript 构建,提供良好的组件类型系统. - 💪 采用 Vue3 最新特性,提升组件性能. - 📖 提供丰富的文档和组件示例. -- 🎨 支持主题定制,可以定制scss变量以及组件的样式自定义. +- 🎨 支持主题定制,可以定制 scss 变量以及组件的样式自定义. - 🍭 支持暗黑模式 ## 📱 预览 -手机扫描上的二维码访问演示: - - +扫描二维码访问演示:

- -## 安装 - -```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) - - diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index d3d19322..1b70f0ed 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -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: '' }, 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 标签" + }] + } + ] } }, diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md index a69a3a49..8b28c955 100644 --- a/docs/guide/introduction.md +++ b/docs/guide/introduction.md @@ -1,6 +1,6 @@ # 介绍 -该组件库基于`uni-app`+`vue3`构建,根据`wot desing mini`的设计规范进行开发,旨在给开发者提供统一的UI交互,同时提高研发的开发效率。 +`wot-design-uni`组件库基于`vue3`+`Typescript`构建,参照`wot desing`的设计规范进行开发,旨在给开发者提供统一的UI交互,同时提高研发的开发效率。 ## 快速上手 @@ -18,11 +18,15 @@
支付宝扫码
-## 特性 +## ✨ 特性 -* 50+ 组件 -* Vue3 + TypeScript 开发 -* 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台 +- 🚀 支持 APP、H5、微信小程序 等平台. +- 🚀 50+ 个高质量组件,覆盖移动端主流场景. +- 💪 使用 Typescript 构建,提供良好的组件类型系统. +- 💪 采用 Vue3 最新特性,提升组件性能. +- 📖 提供丰富的文档和组件示例. +- 🎨 支持主题定制,可以定制scss变量以及组件的样式自定义. +- 🍭 支持暗黑模式 > 使用Vue3最新特性开发,持续优化体验 diff --git a/docs/guide/quickUse.md b/docs/guide/quickUse.md index f07ae17d..7c784dae 100644 --- a/docs/guide/quickUse.md +++ b/docs/guide/quickUse.md @@ -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 @@ 下载地址:wot-design-uni +## 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 ``` + +:::tip 温馨提醒 +使用uni_modules 安装时`Wot Design Uni`的组件天然支持`easycom`规范,无需额外配置,而使用npm安装需要自行配置`easycom`。 +::: diff --git a/docs/index.md b/docs/index.md index a79bc818..1069e9d7 100644 --- a/docs/index.md +++ b/docs/index.md @@ -25,7 +25,7 @@ hero: features: - icon: 🚀 title: 多平台覆盖 - details: 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台。 + details: 支持 APP、H5、微信小程序 等平台。 - icon: 🚀 title: 50+ 组件 details: 超过50个高质量组件,覆盖移动端主流场景。 diff --git a/index.html b/index.html index 0d9d3861..3fc1c46b 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,6 @@ -
diff --git a/package.json b/package.json index f5af06ee..b7ec993d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/main.ts b/src/main.ts index 54ca0c25..a1584bad 100644 --- a/src/main.ts +++ b/src/main.ts @@ -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 } diff --git a/src/uni_modules/wot-design-uni/readme.md b/src/uni_modules/wot-design-uni/readme.md index 4151f6f1..e919938b 100644 --- a/src/uni_modules/wot-design-uni/readme.md +++ b/src/uni_modules/wot-design-uni/readme.md @@ -6,44 +6,56 @@

📱 一个参照Wot-design,基于 Vue3 打造的uni-app组件库

- - deploy-status - + + + GitHub Repo stars + + + + npm + + + + npm + + + + + + + + GitHub + + + + deploy-status + +

🔥 文档网站 (Netlify)

- ## ✨ 特性 -- 🚀 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台. +- 🚀 支持 APP、H5、微信小程序 等平台. - 🚀 50+ 个高质量组件,覆盖移动端主流场景. - 💪 使用 Typescript 构建,提供良好的组件类型系统. - 💪 采用 Vue3 最新特性,提升组件性能. - 📖 提供丰富的文档和组件示例. -- 🎨 支持主题定制,可以定制scss变量以及组件的样式自定义. +- 🎨 支持主题定制,可以定制 scss 变量以及组件的样式自定义. - 🍭 支持暗黑模式 ## 📱 预览 -手机扫描上的二维码访问演示: - - +扫描二维码访问演示:

- -## 安装 - -```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) - - diff --git a/yarn.lock b/yarn.lock index 6739d3b8..dbc50454 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"