uni-app vue3+ts class-style 开发相关

发布于 1周前 作者 eggper 来自 Uni-App

uni-app vue3+ts class-style 开发相关
因为我本身是java程序员，习惯了ts class-style模式的语法糖。
vue2的时候用的是vue-property-decorator，但是在vue3下使用vue-property-decorator会报错，而且这个插件已不再维护。
google了半天，找到另外一个开源的插件vue-facing-decorator。

目前已经整合到vue3 uniapp 中，以下是代码示例，习惯class-style语法糖的同学，可以拿去用拉。

对于uniapp 生命周期函数，可以通过挂载的方式实现。

```typescript import { MyVue } from “@/common/MyVue”;
import LoggerUtil from “@/utils/LoggerUtil”;
import { Component } from “vue-facing-decorator”;

@Component
export default class Home extends MyVue {
title = “hello”;

onLoad() {  
    uni.setNavigationBarTitle({ title: "首页" });  
    LoggerUtil.info("App onLoad111111");  
}  

onShow() {  
    LoggerUtil.info("App Show 1");  
    this.title += ",vue3"  
}  

onHide() {  
    LoggerUtil.info("App Hide");  
}  

onChange() {  
    LoggerUtil.info("App Change");  
    this.title += ",vue3"  
}

} ```

vx: BusyMr-QHD


Harmonyos Next教程
1 回复

在uni-app中使用Vue 3结合TypeScript以及class-style组件开发，可以显著提升代码的可读性和可维护性。下面是一个简单的示例，展示如何在uni-app项目中实现这种开发模式。

首先，确保你的uni-app项目已经配置了Vue 3和TypeScript支持。你可以通过以下命令创建一个新的uni-app项目（假设你已经安装了HBuilderX或者命令行工具）：

vue create -p dcloudio/uni-preset-vue#v3 my-uni-app

然后，在项目根目录下安装vue-class-component和vue-property-decorator，这两个库提供了基于类的Vue组件装饰器：

npm install vue-class-component vue-property-decorator --save

接下来，我们创建一个基于类的Vue组件。假设我们有一个简单的HelloWorld组件：

// src/components/HelloWorld.vue -> src/components/HelloWorld.ts

import { defineComponent, Options } from 'vue-class-component';
import { Prop } from 'vue-property-decorator';

@Options({
  // 组件的Vue选项可以在这里配置
})
export default class HelloWorld extends defineComponent {
  @Prop(String) readonly msg!: string;

  // 计算属性
  get reversedMessage(): string {
    return this.msg.split('').reverse().join('');
  }

  // 生命周期钩子
  mounted() {
    console.log('HelloWorld component mounted');
  }

  // 方法
  greet() {
    alert(`Hello, ${this.msg}!`);
  }

  // 渲染函数或模板（这里为了简洁，我们使用模板）
  render() {
    return (
      <div>
        <p>{{ this.msg }}</p>
        <p>Reversed: {{ this.reversedMessage }}</p>
        <button onClick={this.greet}>Greet</button>
      </div>
    );
  }
}

注意，由于uni-app默认使用.vue文件，你可能需要将.ts文件配置到项目的编译路径中，或者在.vue文件中通过<script lang="ts">来使用TypeScript。上面的例子直接使用了.ts文件，这可能需要你在构建配置中做一些调整。

最后，在你的页面或组件中使用这个HelloWorld组件：

<template>
  <view>
    <HelloWorld msg="uni-app with Vue 3 and TypeScript" />
  </view>
</template>

<script lang="ts">
import HelloWorld from '@/components/HelloWorld.ts';

export default {
  components: {
    HelloWorld
  }
}
</script>

通过上述步骤，你可以在uni-app项目中成功地使用Vue 3、TypeScript以及class-style组件开发模式。这种方式不仅提高了代码的可读性，还充分利用了TypeScript的类型检查和智能提示功能。

回到顶部