使用 TinyVue 组件库搭建前端项目的实操体验

引言

在本次活动中，我选择了使用 OpenTiny 提供的 TinyVue 组件库来搭建一个前端项目。通过这次实践，我不仅深入了解了 TinyVue 组件库的核心优势，还体验到了其在跨框架、跨版本开发中的便捷性。本文将分享我的实操过程和使用感受。

项目搭建过程

环境准备

首先，我按照官方文档的指引，完成了开发环境的准备工作。包括安装 Node.js、Vue CLI 以及 TinyVue 组件库。

# 安装 Vue CLI
npm install -g @vue/cli

# 创建新项目
vue create my-tinyvue-project

# 进入项目目录
cd my-tinyvue-project

# 安装 TinyVue 组件库
npm install @opentiny/vue

使用 TinyVue 组件

在项目中，我使用了 TinyVue 提供的多个组件来构建页面。以下是一个简单的示例，展示了如何使用 TinyButton 组件：

<template>
  <div>
    <tiny-button @click="handleClick">点击我</tiny-button>
  </div>
</template>

<script>
import {
    TinyButton } from '@opentiny/vue';

export default {
   
  components: {
   
    TinyButton
  },
  methods: {
   
    handleClick() {
   
      this.$message.success('按钮点击成功！');
    }
  }
};
</script>

在这个示例中，我们引入了 TinyButton 组件，并在按钮点击时触发一个成功消息。TinyVue 组件库提供了丰富的 UI 组件，可以满足各种业务需求。

主题配置

为了使项目更加美观，我使用了 TinyVue 的 XDesign 主题 (tinySmbTheme)。按照官方文档的指引，我进行了主题配置：

import {
    createApp }<