引言

在本次活动中，我选择了使用 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 } from 'vue';
import App from './App.vue';
import { setupTheme } from '@opentiny/vue-theme';

const app = createApp(App);

// 设置主题
setupTheme(app, {
  theme: 'tinySmbTheme'
});

app.mount('#app');

通过 setupTheme 方法，我们可以轻松地为项目应用主题，使界面风格统一且美观。

创建复杂组件

接下来，我创建了一个更复杂的组件，展示了如何使用多个 TinyVue 组件来构建一个表单：

<template>
  <div>
    <tiny-form ref="form" :model="form" :rules="rules">
      <tiny-form-item label="用户名" prop="username">
        <tiny-input v-model="form.username"></tiny-input>
      </tiny-form-item>
      <tiny-form-item label="密码" prop="password">
        <tiny-input type="password" v-model="form.password"></tiny-input>
      </tiny-form-item>
      <tiny-form-item>
        <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
      </tiny-form-item>
    </tiny-form>
  </div>
</template>

<script>
import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue';

export default {
  components: {
    TinyForm,
    TinyFormItem,
    TinyInput,
    TinyButton
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message.success('提交成功！');
        } else {
          this.$message.error('请填写完整表单！');
          return false;
        }
      });
    }
  }
};
</script>

在这个示例中，我们创建了一个包含用户名和密码输入框的表单，并添加了表单验证功能。通过使用 TinyForm、TinyFormItem、TinyInput 和 TinyButton 组件，我们可以快速构建功能齐全的表单界面。

部署与测试

部署到华为云服务器

1. 购买并配置华为云服务器：

   • 登录华为云官网，购买一台云服务器（ECS）。
   • 配置服务器的基本信息，如操作系统（推荐使用 Ubuntu）、CPU、内存等。

2. 连接到服务器：

   • 使用 SSH 连接到你的云服务器。可以使用以下命令：

     ssh username@your_server_ip
     

3. 安装 Node.js 和 Nginx：

   • 在服务器上安装 Node.js：

     curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
     sudo apt-get install -y nodejs
     

   • 安装 Nginx：

     sudo apt-get update
     sudo apt-get install -y nginx
     

4. 上传项目文件：

   • 使用 SCP 或其他文件传输工具将本地项目文件上传到服务器。例如：

     scp -r /path/to/your/project username@your_server_ip:/path/to/destination
     

5. 构建项目：

   • 进入项目目录并运行构建命令：

     cd /path/to/your/project
     npm install
     npm run build
     
     

6. 配置 Nginx：

   • 编辑 Nginx 配置文件：

     sudo nano /etc/nginx/sites-available/default
     

   • 将以下内容添加到配置文件中：

     server {
         listen 80;
         server_name your_server_ip;
     
         location / {
             root /path/to/your/project/dist;
             try_files $uri $uri/ /index.html;
         }
     }
     

   • 重启 Nginx 服务：

     sudo systemctl restart nginx
     

测试项目

1. 访问项目：
   • 在浏览器中输入你的服务器 IP 地址，应该可以看到你部署的前端项目。
2. 功能测试：
   • 测试项目中的各个功能，确保所有组件和交互都正常工作。
   • 检查表单验证、按钮点击等功能是否按预期运行。

使用感受

通过这次实践，我深刻体会到了 TinyVue 组件库的以下优势：

• 跨框架支持：TinyVue 组件库不仅支持 Vue.js，还能与其他前端框架无缝集成，极大地提高了开发灵活性。
• 丰富的组件：组件库提供了丰富的 UI 组件，满足了各种业务需求，减少了重复造轮子的工作。
• 易于扩展：组件库设计灵活，易于扩展和定制，能够快速适应不同项目的需求。
• 完善的文档：官方文档详细且易于理解，为开发者提供了极大的便利。

结论

总的来说，TinyVue 组件库为前端开发提供了强大的支持和便利。通过这次活动，我不仅提升了自己的开发技能，还对 OpenTiny 的产品有了更深入的了解。希望未来能有更多机会使用和推广这套优秀的前端开发解决方案。
我正在参加【有奖征文 第31期】体验OpenTiny带来的前端开发创新模式
链接：https://bbs.huaweicloud.com/blogs/430969