Vue3 空白模板示例

<template>
  <div class="module-wrap">
    <!-- 使用$props访问props -->
    XX模块开发中...
    <!-- 使用子组件 -->
    <ModuleA />
  </div>
</template>

<script setup>
// 组合式API写法
import { ref, reactive, watch, watchEffect, computed, onMounted } from 'vue'
// @ 如果没有定义，默认指的就是src下面的内容
import ModuleA from '@components/ModuleA.vue'　　
import util from '@util/util.js'

// ----------------- Props定义 -----------------
const props = defineProps({
  // 基本数据类型
  title: {
    type: String,
    default: '默认标题'
  },
  count: {
    type: Number,
    default: 0
  },
  isActive: {
    type: Boolean,
    default: false
  },

  // 复杂数据类型
  items: {
    type: Array,
    default: () => []
  },
  config: {
    type: Object,
    default: () => ({})
  },
  callback: {
    type: Function,
    default: () => {}
  },

  // 联合类型
  dynamicValue: {
    type: [String, Number],
    default: null
  }
})

// ----------------- 响应式数据 -----------------
// 基本类型用ref
const counter = ref(0)
const message = ref('Hello Vue3')

// 复杂类型用reactive
const state = reactive({
  loading: false,
  userInfo: {
    name: 'Guest',
    age: 18
  },
  dataList: []
})

// ----------------- 计算属性 -----------------
const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('')
})

// ----------------- 生命周期 -----------------
onMounted(() => {
  console.log('组件挂载完成')
})

// 其他常用生命周期：
// onBeforeMount
// onBeforeUpdate
// onUpdated
// onBeforeUnmount
// onUnmounted

// ----------------- 监听器 -----------------
// 监听单个ref
watch(counter, (newVal, oldVal) => {
  console.log(`计数器变化：${oldVal} → ${newVal}`)
})

// 监听props变化
watch(() => props.count, (newCount) => {
  console.log('接收到新的count值:', newCount)
})

// 监听多个数据源
watch([() => props.isActive, message], ([newActive, newMsg]) => {
  console.log('active或message变化:', newActive, newMsg)
})

// 立即执行的监听器
watchEffect(() => {
  console.log('当前message值:', message.value)
})

// ----------------- 方法定义 -----------------
const fetchData = async () => {
  state.loading = true
  try {
    const response = await util.apiRequest('/data')
    state.dataList = response.data
  } catch (error) {
    console.error('请求失败:', error)
  } finally {
    state.loading = false
  }
}

const updateUserInfo = (newInfo) => {
  Object.assign(state.userInfo, newInfo)
}

// 暴露方法给父组件
defineExpose({
  resetCounter: () => {
    counter.value = 0
  }
})

// ----------------- 组件逻辑 -----------------
// 初始化操作
fetchData()
</script>

<style lang="less" scoped>
.module-wrap {
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  
  // 使用Less特性
  &:hover {
    background-color: #f5f5f5;
  }
}
</style>

主要特性说明：

1. 组合式API：使用<script setup>语法糖，代码组织更灵活

2. 类型定义：

   • 基本类型：String/Number/Boolean

   • 复杂类型：Array/Object/Function

   • 联合类型：支持多类型定义

3. 响应式系统：

   • 基本类型使用ref

   • 复杂对象使用reactive

4. 生命周期：

   • 包含主要生命周期钩子

   • 使用onXxx格式的API

5. 监听器：

   • 支持单个/多个数据源监听

   • 支持watchEffect立即执行

6. 类型安全：

   • props定义更严谨

   • 默认值设置更规范

7. 样式作用域：

   • 添加scoped限制样式作用域

   • 支持Less预处理器

8. 组件通信：

   • defineProps定义props

   • defineExpose暴露组件方法

9. 异步处理：

   • 包含async/await示例

10. 代码组织：

    • 逻辑按功能模块分组

    • 添加必要注释说明

此模板包含了Vue3开发中最常用的功能模块，可以在此基础上根据实际需求进行扩展。注意需要安装相关依赖（如less-loader处理Less语法）。