如何快速上手wot-design-uni？5分钟完成你的第一个组件页面

【免费下载链接】wot-design-uni 一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。 项目地址: https://gitcode.com/Moonofweisheng/wot-design-uni

wot-design-uni是一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。本文将带你快速上手，5分钟内完成第一个组件页面的搭建。

1. 准备工作

使用wot-design-uni前，请确保你已经学习过Vue官方的快速上手和uni-app提供的学习路线。这将帮助你更好地理解后续的操作步骤。

2. 安装组件库

wot-design-uni提供了两种安装方式，你可以根据自己的需求选择：

2.1 npm安装

如果你习惯使用npm管理依赖，可以通过以下命令安装：

npm i wot-design-uni
# 或者
yarn add wot-design-uni
# 或者
pnpm add wot-design-uni

2.2 uni_modules安装

如果你使用HBuilderX开发，可以直接在uni-app插件市场导入wot-design-uni。导入后，组件库会被放置在项目的uni_modules/wot-design-uni目录下。

3. 安装Sass依赖

wot-design-uni依赖Sass，因此需要确保项目中已安装Sass。如果没有安装，可以通过以下命令安装：

npm i sass -D
# 或者
yarn add sass -D
# 或者
pnpm add sass -D

注意：请确保sass版本为1.78.0及之前的版本，以避免兼容性问题。

4. 配置组件自动引入

4.1 配置easycom（方案1）

在pages.json中添加以下配置，即可实现组件的自动引入：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
    }
  },
  "pages": [
    // 你的页面配置
  ]
}

4.2 使用vite插件（方案2）

如果你使用vite构建项目，可以安装@uni-helper/vite-plugin-uni-components插件：

npm i @uni-helper/vite-plugin-uni-components -D

然后在vite.config.ts中添加配置：

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import Components from '@uni-helper/vite-plugin-uni-components'
import { WotResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [WotResolver()]
    }), 
    uni()
  ],
});

5. 创建第一个组件页面

现在，让我们来创建一个简单的页面，使用wot-design-uni的按钮组件。

在pages目录下创建一个新的页面，例如index.vue，添加以下代码：

<template>
  <view class="content">
    <wd-button>主要按钮</wd-button>
    <wd-button type="success">成功按钮</wd-button>
    <wd-button type="info">信息按钮</wd-button>
    <wd-button type="warning">警告按钮</wd-button>
    <wd-button type="error">危险按钮</wd-button>
  </view>
</template>

<style>
.content {
  padding: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
</style>

这段代码使用了wot-design-uni的按钮组件，展示了不同类型的按钮。你可以看到，我们不需要手动导入组件，直接使用即可。

6. 运行项目

完成以上步骤后，你可以运行项目，在模拟器或真机上查看效果。如果一切正常，你将看到一个包含多种类型按钮的页面。

7. 更多组件使用

wot-design-uni提供了70+组件，你可以在组件文档中查看所有组件的详细用法。例如，你可以尝试添加一个卡片组件：

<wd-card title="卡片标题" sub-title="卡片副标题">
  <view slot="content">这是卡片内容</view>
  <view slot="footer">
    <wd-button size="small">按钮1</wd-button>
    <wd-button size="small" type="success">按钮2</wd-button>
  </view>
</wd-card>

8. 使用脚手架快速创建项目

如果你想快速开始一个新项目，可以使用wot-design-uni提供的脚手架：

pnpm create uni@latest -t wot-starter <你的项目名称>

这个脚手架集成了wot-design-uni和众多优秀插件，可以帮助你快速搭建项目框架。

总结

通过本文的介绍，你已经了解了如何快速上手wot-design-uni组件库。从安装到配置，再到创建第一个组件页面，整个过程非常简单。现在，你可以开始探索更多组件，构建你的uni-app项目了！

【免费下载链接】wot-design-uni 一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。 项目地址: https://gitcode.com/Moonofweisheng/wot-design-uni