求一个typescript的uni-app的helloWorld模板

求一个typescript的uni-app的helloWorld模板

13 回复

更新：cli新建时有ts模板可以选择。HBuilderX创建的项目可以直接使用，在插件安装里把ts插件编译装好就行

更多关于求一个typescript的uni-app的helloWorld模板的实战教程也可以访问 https://www.itying.com/category-93-b0.html


噢，现在还没完善ts版本的是吧？

回复 Mr将先生:今天GitHub更新的cli版已经支持内联ts了。现网版hx只能外联引用ts

好的！非常地感谢大大的热心以及耐心回复！

请问大大有链接传送门吗？

ts版本找到了，已在使用开发中了，感谢@16

回复 Mr将先生:请问可以发我一份吗？ 给个传送地址可以么 谢谢

回复 3***@qq.com: ts版本的，你按照官方cli版创建会有ts版可以选择的，我已经切换回常规版本了，暂时不用ts版的

选择cli中的ts模板，进来就报错，但是能启动。原因应该跟vue项目中ts文件不能识别vue文件一样的吧。请问楼主你是怎么解决的？

如果可以正常运行，那可能是vscode的语法校验工具有问题

回复 DCloud_heavensoft: ts版本是3.4.5。ESLint插件也删了的。官方如果有时间可以看下这个什么问题，虽然不影响使用，看着挺烦的。

请问有没有具体的操作流程？

当然，以下是一个使用 TypeScript 的 uni-app 的 helloWorld 模板示例。这个示例展示了如何创建一个简单的 uni-app 项目，并在页面上显示 “Hello, World!”。

首先，确保你已经安装了 HBuilderX 或者其他支持 uni-app 的开发工具，并且已经安装了 Node.js 和 npm。

  1. 创建项目： 在 HBuilderX 中，选择“文件” -> “新建” -> “项目”，然后选择“uni-app”项目模板，填写项目名称和路径，选择 TypeScript 作为编程语言。

  2. 项目结构： 创建完成后，你的项目目录结构可能类似于以下：

    my-uni-app/
├── pages/
│   └── index/
│       ├── index.vue
│       ├── index.ts
│       └── index.scss (或 index.style)
├── static/
├── main.ts
├── pages.json
├── manifest.json
├── uni.scss (或 uni.style)
└── tsconfig.json

  3. 修改 pages/index/index.vue：

    <template>
  <view class="content">
    <text>{{ message }}</text>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Index',
  setup() {
    const message = ref('Hello, World!');
    return {
      message
    };
  }
});
</script>

<style scoped>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
text {
  font-size: 24px;
  color: #333;
}
</style>

  4. 修改 main.ts：

    import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

  5. 运行项目： 在 HBuilderX 中，你可以直接点击运行按钮，选择模拟器或者真机调试来运行你的项目。

以上代码展示了如何创建一个简单的 uni-app 项目，并在首页显示 “Hello, World!”。这个示例使用了 Vue 3 和 TypeScript，并且遵循了 uni-app 的项目结构。你可以根据需要进一步扩展和修改这个项目。

回到顶部