HarmonyOS 开发探索：以VUE方式打开鸿蒙开发

最新推荐文章于 2025-05-10 17:38:45 发布

代码中的爱马仕

最新推荐文章于 2025-05-10 17:38:45 发布

阅读量2.9k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： OpenHarmony 鸿蒙 HarmonyOS 文章标签： harmonyos 华为前端鸿蒙鸿蒙开发 vue.js 程序员

本文链接：https://blog.csdn.net/DMZDAMS/article/details/140100760

在这篇文章中，将带你一起探索从 Vue.js 到 HarmonyOS 的转换过程。无论你是前端开发的新手，还是经验丰富的老手，我相信这段旅程都将为你提供新的视角和灵感。让我们一起踏上这段充满挑战和乐趣的技术探险之旅吧！

从.vue文件到.ets文件的转换

在本文中，我们将探讨如何将 Vue.js 文件转换为 HarmonyOS 的 ArkTS 文件。Vue 文件通过 HTML、JS、CSS 三个部分进行分离，而 ArkTS 文件则将组件和样式合并在一起。以下是一个简单的文本组件在屏幕上水平垂直居中的示例代码。

.vue文件写法

<script setup lang='ts'>
const text = ref('Hello Vue')
</script>
<template>
  <div class="hello_class">
    {
  
  { text }}
  </div>
</template>

<style>
.hello_class {
  width: 100%;
  height: 100vh;
  line-height: 100vh;
  font-size: 50px;
  color: red;
  text-align: center;
}
</style>

效果

.ets文件写法

// 修饰器：表示作为页面，一般和@Component一起写
@Entry
// 修饰器：表示作为组件，可单独写
@Component
build() {
  Text('Hello HmOs')
    .width('100%')
    .height('100%')
    .lineHeight('100%')
    .fontSize('50vp')
    // 这两处的值用到的是atkTs的枚举值
    .fontColor(Color.Red)
    .textAlign(TextAlign.Center)
}

效果