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

最新推荐文章于 2024-09-13 23:32:49 发布

Echo_Wish

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量859

点赞数 22

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_46178278/article/details/141189105

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

引言

在本次活动中，我选择了使用 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 组件，我们可以快速构建功能齐全的表单界面。

部署与测试

部署到华为云服务器

购买并配置华为云服务器：
- 登录华为云官网，购买一台云服务器（ECS）。
- 配置服务器的基本信息，如操作系统（推荐使用 Ubuntu）、CPU、内存等。
连接到服务器：
- 使用 SSH 连接到你的云服务器。可以使用以下命令：
```
ssh username@your_server_ip
```

安装 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

上传项目文件：
- 使用 SCP 或其他文件传输工具将本地项目文件上传到服务器。例如：
```
scp -r /path/to/your/project username@your_server_ip:/path/to/destination
```

构建项目：

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

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

配置 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;
    }
}