vue+CSS3移动端App开发美团外卖平台系统项目1-2（实现首页展示）

<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <div class="nav">
      <div class="nav-left">
        <img src="../assets/logo.png" alt="logo" />
        <span>美团外卖</span>
      </div>
      <div class="nav-right">
        <span>下单</span>
      </div>
    </div>
 
    <!-- 顶部banner -->
    <div class="banner">
      <img src="../assets/banner.jpg" alt="banner" />
    </div>
 
    <!-- 分类 -->
    <div class="category">
      <div class="category-item" v-for="(item, index) in categoryList" :key="index">
        <img :src="item.image" alt="category" />
        <span>{{ item.name }}</span>
      </div>
    </div>
 
    <!-- 特色推荐 -->
    <div class="special-recommend">
      <div class="sr-item" v-for="(item, index) in specialList" :key="index">
        <img :src="item.image" alt="special" />
        <div class="info">
          <span class="name">{{ item.name }}</span>
          <span class="desc">{{ item.desc }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'Home',
  data() {
    return {
      categoryList: [
        // ... 分类数据
      ],
      specialList: [
        // ... 特色推荐数据
      ],
    };
  },
  // 组件创建后的钩子函数
  created() {
    // 这里可以发起API请求获取数据
  },
};
</script>
 
<style lang="scss" scoped>
/* 这里是CSS样式代码，用于控制页面的布局和样式 */
</style>

这个代码实例展示了如何使用Vue组件结构来构建一个简单的移动端外卖平台首页。在data函数中定义了用于渲染的数据列表，并在created生命周期钩子中可以添加获取数据的逻辑。在template部分，使用了类名和Vue的列表渲染指令来构建页面布局，并绑定了对应的样式类。这个简单的例子展示了如何组织Vue项目的结构，并且如何通过数据绑定和列表渲染来动态生成页面内容。