uniapp vue3的ts页面初始化模板代码

uniapp vue3的ts页面初始化模板代码

在 UniApp 中使用 Vue 3 和 TypeScript 可以大大提升开发效率和代码质量。下面是一个完整的页面初始化模板，以及一些关键的最佳实践，帮助你快速上手。

下面是一个基础的页面模板示例，您可以直接复制使用，并根据需要进行修改：

<template><viewclass="page-container"><!--页面内容--><textclass="title">{{pageTitle}}</text><view v-if="loading"class="loading">加载中...</view><view v-else><text>计数器:{{count}}</text><text>双倍计数:{{doubleCount}}</text><button @click="increment">增加</button><button @click="reset">重置</button></view><!--条件编译示例--><!--#ifdefH5--><view>仅在H5端显示</view><!--#endif--></view></template><script setup lang="ts">// 1. 导入依赖import{ref,computed,onMounted}from'vue'import{onLoad,onShow,onHide}from'@dcloudio/uni-app'// 2. 类型定义（可选，但推荐）interfacePageQuery{id?:string}interfaceUserInfo{name:string age:number}// 3. 响应式数据constpageTitle=ref<string>('首页')constcount=ref<number>(0)constloading=ref<boolean>(false)constuserInfo=ref<UserInfo|null>(null)// 4. 计算属性constdoubleCount=computed(():number=>count.value*2)// 5. 方法定义constincrement=():void=>{count.value++}constreset=():void=>{count.value=0}constfetchData=async():Promise<void>=>{loading.value=truetry{// 模拟API调用// const response = await someAPI()}catch(error){console.error('获取数据失败:',error)}finally{loading.value=false}}// 6. 生命周期函数onLoad((options:PageQuery)=>{console.log('页面参数:',options)if(options.id){// 根据ID获取数据fetchData()}})onShow(()=>{console.log('页面显示')})onHide(()=>{console.log('页面隐藏')})onMounted(()=>{console.log('组件挂载完成')})</script><style scoped lang="scss">.page-container{padding:32rpx;min-height:100vh;}.title{font-size:36rpx;font-weight:bold;color:#333;margin-bottom:24rpx;}.loading{text-align:center;padding:40rpx;color:#666;}button{margin:20rpx;padding:20rpx40rpx;}</style>

💡 关键实践说明

1. 生命周期函数：UniApp 页面的生命周期需从'@dcloudio/uni-app'导入，如onLoad、onShow、onHide。其中onLoad可用于接收页面参数。
2. 响应式数据：使用ref定义基本类型数据，复杂对象可使用reactive。通过.value访问ref的值。
3. 计算属性：使用computed创建依赖其他响应式数据的值，它会自动缓存结果。
4. 条件编译：可以使用/* #ifdef */和/* #endif */注释语法编写特定平台代码。

🚀 进阶开发技巧

为了提升开发体验，您可以考虑以下配置：

• 路径别名：在vite.config.ts和tsconfig.json中配置@别名，简化导入路径。
• 自动导入：使用unplugin-auto-import插件，自动导入ref,computed等 Vue API，无需手动引入。
• 状态管理：对于复杂应用，可集成Pinia进行状态管理，并搭配持久化插件。
• 代码规范：配置 ESLint、Prettier 和 Stylelint 来统一代码风格。

💎 总结

这个模板涵盖了 UniApp Vue3 TS 页面开发的核心要素。在实际项目中，建议您根据业务逻辑调整数据、方法和样式。