深入探索 TinyVue 和 TinyEngine：前端开发的全新体验【OpenTiny】

哈喽，各位小伙伴们，你们好呀，我是喵手。运营社区：C站/掘金/腾讯云/阿里云/华为云/51CTO；欢迎大家常来逛逛

  今天我要给大家分享一些自己日常学习到的一些知识点，并以文字的形式跟大家一起交流，互相学习，一个人虽可以走的更快，但一群人可以走的更远。

  我是一名后端开发爱好者，工作日常接触到最多的就是Java语言啦，所以我都尽量抽业余时间把自己所学到所会的，通过文章的形式进行输出，希望以这种方式帮助到更多的初学者或者想入门的小伙伴们，同时也能对自己的技术进行沉淀，加以复盘，查缺补漏。

小伙伴们在批阅的过程中，如果觉得文章不错，欢迎点赞、收藏、关注哦。三连即是对作者我写作道路上最好的鼓励与支持！

前端开发不断演进，新的框架和工具层出不穷，它们承诺提升开发效率、优化代码质量和改善用户体验。最近，我深入使用了 TinyVue 和 TinyEngine 进行前端项目的开发，探索了它们在实际开发中的表现和效果。在这篇文章中，我将分享我使用这两个工具的详细经验，包括如何利用 TinyVue 的 XDesign 主题（tinySmbTheme）进行区块搭建，如何设置开发环境，以及我在实践中遇到的挑战和解决方案。

TinyVue 和 TinyEngine：概述与优势

TinyVue：精简高效的 UI 组件库

TinyVue 是一个基于 Vue.js 的前端 UI 框架，致力于提供高性能的组件和灵活的定制能力。其设计理念是简化开发流程，同时提供丰富的功能，使开发者能够快速构建现代化的用户界面。TinyVue 提供的组件库涵盖了常见的 UI 需求，如表单、按钮、卡片和弹窗等，每个组件都可以根据项目需求进行高度定制。

TinyEngine：全方位的前端管理工具

TinyEngine 是一个前端项目管理工具，旨在帮助开发者快速启动、构建和部署项目。它提供了一整套脚手架工具，支持自动化构建、版本控制和环境配置。TinyEngine 与 TinyVue 无缝集成，使得项目的初始化和管理变得更加高效和便捷。其灵活的配置选项和强大的 CLI 工具使得项目开发过程中的各种操作都变得更加顺畅。

实践操作：构建和管理前端项目的详细步骤

在这次实践中，我使用 TinyVue 和 TinyEngine 搭建了一个包含多个典型页面的前端项目，并探索了如何使用 TinyVue 的 XDesign 主题（tinySmbTheme）进行区块搭建。以下是详细的操作步骤和经验分享。

环境准备

1. 安装 TinyEngine 和 TinyVue

首先，我需要在本地环境中安装 TinyEngine 和 TinyVue，以便启动和管理项目。以下是相关命令：

npm install -g @tiny/cli
tiny init my-tiny-project
cd my-tiny-project
npm install

这一步骤完成了项目的初始化，包括安装必要的依赖和配置文件。

2. 配置 XDesign 主题（tinySmbTheme）

接下来，我配置了 TinyVue 的 XDesign 主题（tinySmbTheme），以确保项目的视觉风格符合预期。在项目的入口文件中引入主题文件，并在配置文件中进行相关设置：

// src/main.js
import 'tiny-vue/theme/tinySmbTheme/index.css';

// tiny.config.js
module.exports = {
  theme: 'tinySmbTheme',
  // 其他配置项
};

这一配置使得整个项目能够使用 XDesign 主题的样式，从而保持一致的视觉风格。

搭建典型页面区块

在配置完成后，我开始使用 TinyVue 的组件库搭建多个典型的页面区块，包括登录页面、用户信息展示页和表单管理页。以下是每个页面的具体实现和使用经验。

1. 登录页面

登录页面是大多数应用程序的基础组件之一。我使用了 TinyVue 的 tiny-form、tiny-input 和 tiny-button 组件来创建一个简洁的登录界面。

<template>
  <div class="login-block">
    <tiny-form :model="loginForm">
      <tiny-form-item label="用户名">
        <tiny-input v-model="loginForm.username" placeholder="请输入用户名"></tiny-input>
      </tiny-form-item>
      <tiny-form-item label="密码">
        <tiny-input type="password" v-model="loginForm.password" placeholder="请输入密码"></tiny-input>
      </tiny-form-item>
      <tiny-form-item>
        <tiny-button type="primary" @click="handleLogin">登录</tiny-button>
      </tiny-form-item>
    </tiny-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    handleLogin() {
      // 登录逻辑
      console.log('用户登录', this.loginForm);
    }
  }
};
</script>

<style scoped>
.login-block {
  width: 350px;
  margin: 150px auto;
  padding: 30px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

在构建这个登录页面时，TinyVue 提供的组件使用起来非常方便，表单绑定和事件处理都非常直观。

代码解析：

  针对如上示例代码，这里我给大家详细的代码剖析下，以便于帮助大家理解的更为透彻，帮助大家早日掌握。

这段代码是一个使用 Vue.js 框架编写的登录表单组件。它展示了 Vue.js 的几个核心概念，包括模板语法、数据绑定、事件处理和样式。以下是代码的详细解释：

模板部分 (<template>)

1. <div class="login-block">：定义了一个包含登录表单的容器。
2. <tiny-form>：可能是一个自定义组件，用于创建表单结构。
3. <tiny-form-item>：可能是一个自定义组件，用于创建表单项，每个 <tiny-form-item> 包含一个标签（label）和一个表单控件。
4. <tiny-input>：可能是一个自定义组件，用于创建输入框，支持 v-model 指令进行数据双向绑定。
5. <tiny-button>：可能是一个自定义组件，用于创建按钮，@click 指令用于绑定点击事件。

脚本部分 (<script>)

1. export default：导出一个对象，定义了 Vue 组件的选项。
2. data()：返回一个对象，包含组件的响应式数据。在这个例子中，有一个 loginForm 对象，包含 username 和 password 两个属性。
3. methods：包含组件的方法。handleLogin 方法用于处理登录逻辑，目前只是打印出 loginForm 的内容。

样式部分 (<style scoped>)

1. .login-block：定义了登录表单容器的样式，包括宽度、边距、内边距、背景颜色和阴影效果。
2. scoped：表示这些样式只应用于当前组件，不会影响到其他组件。

功能

• 用户可以在用户名和密码输入框中输入相应的信息。
• 点击登录按钮时，会触发 handleLogin 方法，目前该方法只是将用户输入的信息打印到控制台。

注意事项

• 代码中的 <tiny-form>、<tiny-form-item>、<tiny-input> 和 <tiny-button> 需要是已经定义好的自定义组件，否则这段代码将无法正常工作。
• v-model 指令用于创建数据的双向绑定，确保输入框中的数据与 loginForm 对象中的 username 和 password 属性保持同步。
• @click 指令用于监听点击事件，并调用 handleLogin 方法。

这个组件可以作为登录页面的一部分，通过实际的登录逻辑来扩展 handleLogin 方法，例如发送请求到服务器进行用户认证。

2. 用户信息展示页

用户信息展示页是用户管理系统中常见的页面之一。我使用了 tiny-card 和 tiny-form 组件来展示用户信息，并允许编辑某些字段。

<template>
  <div class="user-info-block">
    <tiny-card title="用户信息">
      <tiny-form :model="userInfo">
        <tiny-form-item label="用户名">
          <tiny-input v-model="userInfo.username" disabled></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="电子邮件">
          <tiny-input v-model="userInfo.email"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="电话">
          <tiny-input v-model="userInfo.phone"></tiny-input>
        </tiny-form-item>
        <tiny-form-item>
          <tiny-button type="primary" @click="handleSave">保存</tiny-button>
        </tiny-form-item>
      </tiny-form>
    </tiny-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        username: 'John Doe',
        email: 'john.doe@example.com',
        phone: '123-456-7890'
      }
    };
  },
  methods: {
    handleSave() {
      // 保存用户信息逻辑
      console.log('保存用户信息', this.userInfo);
    }
  }
};
</script>

<style scoped>
.user-info-block {
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>

这个页面通过 tiny-card 组件创建了一个卡片布局，使得信息展示更具结构性。tiny-form 组件的使用也使得数据绑定和表单管理变得简单。

代码解析：

  针对如上示例代码，这里我给大家详细的代码剖析下，以便于帮助大家理解的更为透彻，帮助大家早日掌握。

这段代码是一个 Vue.js 组件，用于展示和编辑用户信息。它包含了模板、脚本和样式三部分。以下是代码的详细解释：

模板部分 (<template>)

1. <div class="user-info-block">：定义了一个包含用户信息的容器。
2. <tiny-card title="用户信息">：可能是一个自定义组件，用于创建一个带有标题的卡片视图。
3. <tiny-form :model="userInfo">：可能是一个自定义组件，用于创建表单结构，并通过 :model 属性绑定 userInfo 数据对象。
4. <tiny-form-item>：自定义组件，用于创建表单项，每个 <tiny-form-item> 包含一个标签（label）和一个表单控件。
5. <tiny-input>：自定义组件，用于创建输入框，支持 v-model 指令进行数据双向绑定。disabled 属性表示该输入框不允许编辑。
6. <tiny-button type="primary" @click="handleSave">：自定义组件，用于创建按钮，@click 指令用于绑定点击事件，触发 handleSave 方法。

脚本部分 (<script>)

1. export default：导出一个对象，定义了 Vue 组件的选项。
2. data()：返回一个对象，包含组件的响应式数据。在这个例子中，有一个 userInfo 对象，包含 username、email 和 phone 三个属性，它们分别被初始化为默认值。
3. methods：包含组件的方法。handleSave 方法用于处理保存用户信息的逻辑，目前只是打印出 userInfo 的内容。

样式部分 (<style scoped>)

1. .user-info-block：定义了用户信息容器的样式，包括最大宽度、边距、内边距、背景颜色和阴影效果。
2. scoped：表示这些样式只应用于当前组件，不会影响到其他组件。

功能

• 用户可以查看用户名、电子邮件和电话号码信息。
• 用户可以编辑电子邮件和电话号码信息，但用户名输入框被禁用，不可编辑。
• 点击保存按钮时，会触发 handleSave 方法，目前该方法只是将用户信息打印到控制台。

注意事项

• 代码中的 <tiny-card>、<tiny-form>、<tiny-form-item>、<tiny-input> 和 <tiny-button> 需要是已经定义好的自定义组件，否则这段代码将无法正常工作。
• v-model 指令用于创建数据的双向绑定，确保输入框中的数据与 userInfo 对象中的 email 和 phone 属性保持同步。
• @click 指令用于监听点击事件，并调用 handleSave 方法。

这个组件可以作为用户信息编辑页面的一部分，通过实际的保存逻辑来扩展 handleSave 方法，例如发送请求到服务器更新用户信息。

3. 表单管理页

表单管理页涉及到多个表单控件的使用，包括下拉选择框、日期选择器和开关按钮等。以下是实现代码：

3.1 实现代码

<template>
  <div class="form-management-block">
    <tiny-card title="表单管理">
      <tiny-form :model="formData" label-width="100px">
        <tiny-form-item label="用户名">
          <tiny-input v-model="formData.username"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="生日">
          <tiny-date-picker v-model="formData.birthday"></tiny-date-picker>
        </tiny-form-item>
        <tiny-form-item label="性别">
          <tiny-select v-model="formData.gender">
            <tiny-option label="男" value="male"></tiny-option>
            <tiny-option label="女" value="female"></tiny-option>
          </tiny-select>
        </tiny-form-item>
        <tiny-form-item label="接受通知">
          <tiny-switch v-model="formData.notifications"></tiny-switch>
        </tiny-form-item>
        <tiny-form-item>
          <tiny-button type="primary" @click="handleSubmit">提交</tiny-button>
        </tiny-form-item>
      </tiny-form>
    </tiny-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        birthday: '',
        gender: '',
        notifications: false
      }
    };
  },
  methods: {
    handleSubmit() {
      // 提交表单逻辑
      console.log('提交表单', this.formData);
    }
  }
};
</script>

<style scoped>
.form-management-block {
  max-width: 700px;
  margin: 50px auto;
  padding: 25px;
  background-color: #f4f4f4;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
</style>

这个页面展示了 TinyVue 组件的多样性和灵活性，通过组合使用不同的表单组件，实现了复杂的表单管理功能。

3.2 代码解析：

  针对如上示例代码，这里我给大家详细的代码剖析下，以便于帮助大家理解的更为透彻，帮助大家早日掌握。

这段代码是一个 Vue.js 组件，用于创建和管理一个包含多种表单控件的表单。它展示了如何使用 Vue.js 构建一个具有数据绑定、事件处理和自定义组件的动态表单。以下是代码的详细解释：

3.3 模板部分 (<template>)

1. <div class="form-management-block">：定义了一个包含表单管理的容器。
2. <tiny-card title="表单管理">：可能是一个自定义组件，用于创建一个带有标题的卡片视图。
3. <tiny-form :model="formData" label-width="100px">：可能是一个自定义组件，用于创建表单结构，并通过 :model 属性绑定 formData 数据对象。label-width 属性可能用于设置标签的宽度。
4. <tiny-form-item>：自定义组件，用于创建表单项，每个 <tiny-form-item> 包含一个标签（label）和一个表单控件。
5. <tiny-input>：自定义组件，用于创建文本输入框，支持 v-model 指令进行数据双向绑定。
6. <tiny-date-picker>：自定义组件，用于创建日期选择器，支持 v-model 指令进行数据双向绑定。
7. <tiny-select>：自定义组件，用于创建下拉选择框，支持 v-model 指令进行数据双向绑定。
8. <tiny-option>：自定义组件，用于在 <tiny-select> 中创建可选项。
9. <tiny-switch>：自定义组件，用于创建开关控件，支持 v-model 指令进行数据双向绑定。
10. <tiny-button type="primary" @click="handleSubmit">：自定义组件，用于创建按钮，@click 指令用于绑定点击事件，触发 handleSubmit 方法。

3.4 脚本部分 (<script>)

1. export default：导出一个对象，定义了 Vue 组件的选项。
2. data()：返回一个对象，包含组件的响应式数据。在这个例子中，有一个 formData 对象，包含 username、birthday、gender 和 notifications 四个属性，它们分别被初始化为默认值。
3. methods：包含组件的方法。handleSubmit 方法用于处理表单提交的逻辑，目前只是打印出 formData 的内容。

3.5 样式部分 (<style scoped>)

1. .form-management-block：定义了表单管理容器的样式，包括最大宽度、边距、内边距、背景颜色和阴影效果。
2. scoped：表示这些样式只应用于当前组件，不会影响到其他组件。

3.6 功能

• 用户可以在表单中输入用户名、选择生日、选择性别和选择是否接受通知。
• 点击提交按钮时，会触发 handleSubmit 方法，目前该方法只是将表单数据打印到控制台。

3.7 注意事项

• 代码中的 <tiny-card>、<tiny-form>、<tiny-form-item>、<tiny-input>、<tiny-date-picker>、<tiny-select>、<tiny-option> 和 <tiny-switch> 需要是已经定义好的自定义组件，否则这段代码将无法正常工作。
• v-model 指令用于创建数据的双向绑定，确保表单控件中的数据与 formData 对象中的属性保持同步。
• @click 指令用于监听点击事件，并调用 handleSubmit 方法。

这个组件可以作为用户信息管理页面的一部分，通过实际的表单提交逻辑来扩展 handleSubmit 方法，例如发送请求到服务器保存用户信息。

遇到的挑战与解决方案

在实际开发过程中，我遇到了一些挑战，并找到了解决方案。

1. 组件的兼容性问题

在使用 TinyVue 的组件时，我发现某些组件在不同浏览器中的表现

略有不同。为了确保一致性，我查阅了 TinyVue 的文档，并对组件进行了适当的调整。例如，通过修改样式和使用 polyfill，解决了兼容性问题。

2. 主题样式的调整

虽然 XDesign 主题提供了默认的样式，但在实际应用中，我需要根据项目需求进行样式微调。我通过调整 CSS 变量和覆盖默认样式来实现这一目标。TinyVue 的主题系统允许灵活地定制样式，使得项目的视觉效果能够满足特定需求。

3. 项目配置的复杂性

TinyEngine 提供了丰富的配置选项，但在初期使用时，配置过程略显复杂。为了简化配置，我阅读了相关文档，并参考了社区的最佳实践。这帮助我更好地理解了 TinyEngine 的配置逻辑，并提高了项目的管理效率。

总结

通过这次实践，我对 TinyVue 和 TinyEngine 的使用有了深刻的认识。TinyVue 提供了一个高效、灵活的 UI 组件库，而 TinyEngine 则简化了项目的管理和构建过程。结合使用这两个工具，我能够快速搭建和管理前端项目，提高了开发效率并优化了用户体验。

总的来说，TinyVue 和 TinyEngine 是前端开发中非常有价值的工具，尤其适合需要快速构建和管理大型项目的场景。如果你正在寻找一个高效的前端解决方案，值得尝试这两个工具。希望本文的分享能为你的前端开发提供有益的参考和启发。

文末

好啦，以上就是我这期的全部内容，如果有任何疑问，欢迎下方留言哦，咱们下期见。

… …

学习不分先后，知识不分多少；事无巨细，当以虚心求教；三人行，必有我师焉！！！

wished for you successed ！！！

⭐️若喜欢我，就请关注我叭。

⭐️若对您有用，就请点赞叭。

⭐️若有疑问，就请评论留言告诉我叭。

我正在参加【有奖征文 第31期】体验OpenTiny带来的前端开发创新模式
链接：https://bbs.huaweicloud.com/blogs/430969