admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 09:08:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: ✏️ 文档优化增加对安装配置的介绍

Browse Source
This commit is contained in:
xuqingkai 2023-08-23 13:02:43 +08:00
parent 1b866c062e
commit 572db8c9ee
10 changed files with 411 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
README.md
View File

@ -6,19 +6,40 @@
<p align="center">📱 一个参照<a href="https://ftf.jd.com/wot-design/">Wot-design</a>，基于 Vue3 打造的uni-app组件库</p>
<p align="center">
<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 最新特性，提升组件性能.
@ -28,22 +49,13 @@
## 📱 预览
手机扫描上的二维码访问演示：
扫描二维码访问演示：
<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)

60
docs/.vitepress/config.ts
View File

@ -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
@ -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,18 +46,61 @@ 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: '指南', activeMatch: '/guide/', items: [
{
text: '介绍',
link: '/guide/introduction',
},
{
text: '快速上手',
link: '/guide/quickUse',
},
{
text: '定制主题',
link: '/guide/customTheme',
},
{
text: '字体',
link: '/guide/typography',
},
{
text: '更新日志',
link: '/guide/changelog',
},
{
text: '常见问题',
link: '/guide/commonProblems',
}
]
},
{
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/' },
{

14
docs/guide/introduction.md
View File

@ -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最新特性开发，持续优化体验

79
docs/guide/quickUse.md
View File

@ -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`。
:::

2
docs/index.md
View File

@ -25,7 +25,7 @@ hero:
features:
- icon: 🚀
title: 多平台覆盖
details: 支持 APP、H5、微信小程序、支付宝小程序、钉钉小程序 等平台。
details: 支持 APP、H5、微信小程序 等平台。
- icon: 🚀
title: 50+ 组件
details: 超过50个高质量组件，覆盖移动端主流场景。

1
index.html
View File

@ -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>

1
package.json
View File

@ -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",

8
src/main.ts
View File

@ -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
}

38
src/uni_modules/wot-design-uni/readme.md
View File

@ -6,19 +6,40 @@
<p align="center">📱 一个参照<a href="https://ftf.jd.com/wot-design/">Wot-design</a>，基于 Vue3 打造的uni-app组件库</p>
<p align="center">
<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 最新特性，提升组件性能.
@ -28,22 +49,13 @@
## 📱 预览
手机扫描上的二维码访问演示：
扫描二维码访问演示：
<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)

5
yarn.lock
View File

@ -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"