初心不改，代码相伴：从 .vue 到 .ets 的旅程

作为一名开发者，我们总是在追求技术的不断突破和自身的成长。今天，我怀着无比激动的心情，发布了我的第一篇关于HarmonyOS的博客。这不仅是我编程之路上的一个里程碑，更是一次全新的起航。

在这篇博客中，我将带你一起探索从 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)
}

效果

进一步优化ets文件

我们看到 Vue 文件中样式分离的写法非常优雅，那么在 .ets 文件中是否也能实现样式分离呢？答案是肯定的。

ets分离样式并定义变量

通过使用 @Extend 装饰器并且指定一个组件，将样式抽离出来。ArkTS 提供了一种高效的样式管理方式。这种方式不仅提升了代码的可维护性和复用性，还使得开发过程更加简洁高效。在实际开发中，充分利用这一特性，可以大幅提高我们的开发效率和代码质量。

@Entry
@Component
struct test1 {
  // 使用State注解定义变量 使text具有“双向绑定”
  @State text:string = "Hello HmOs"
  build() {
    Text(this.text)
      .MyTextStyle()  // 使用抽离出的样式，在组件后面链式调用即刻

  }
}
// 指定Text抽离出样式，像前端中的class一样也可以抽离公共样式。
@Extend(Text)
function MyTextStyle() {
  .width('100%')
  .height('100%')
  .lineHeight('100%')
  .fontSize('50vp')
  .fontColor(Color.Red)
  .textAlign(TextAlign.Center)
}

事件绑定

接下来我们展示vue和ets对于事件绑定的区别（省略样式代码了哈）

vue文件中的事件绑定

<script setup lang='ts'>
const text = ref('Hello Vue')
const clickFn = () => {
  setTimeout(() => {
    text.value = '你好 Vue'
  },300)
}
</script>
<template>
  // vue中使用 @click绑定事件，点击后触发绑定的函数
  <div class="hello_class" @click="clickFn">
    {{ text }}
  </div>
</template>

效果

ArkTs文件中的事件绑定

@Entry
@Component
struct test1 {
  @State text:string = "Hello HmOs"
  // 直接定义函数
  clickFn = () => {
    setTimeout(() => {
      this.text = "你好 鸿蒙"
    },300)
  }
  build() {
    Text(this.text)
      .MyTextStyle()
      .onClick(this.clickFn) // 使用链式调用 onClick绑定点击事件

  }
}

效果 2.mov.gif

总结

从以上对比可以看出，ArkTS 的写法和 Vue 略有不同，但思想上类似。通过分离公共方法、公共样式，实现组件化编程，可以更加优雅地组织代码。

希望本文能帮助你理解如何从 Vue 文件角度写 ArkTS 文件。如果你有任何问题或建议，欢迎在评论区留言。

HarmonyOS NEXT⚡️以VUE方式打开鸿蒙开发