制作一个pc端在线点单页面，要求包括9个方块模型，在页面上以3乘3的布局显示，每个模块内包含商家名称，特色菜品，以及添加购物车，点击左侧按钮+1，点击右侧按钮-1，页面最下面端有一个提交按钮，点击后显示弹窗“您已下单”。用vue做

制作PC端在线点单页面可以使用Vue.js来构建，因为Vue是一个轻量级的JavaScript框架，非常适合构建用户界面。以下是基本步骤：

1. **项目初始化**:
首先，安装Vue CLI创建一个新的Vue项目：`npm install -g @vue/cli`
然后通过命令行启动项目：`vue create online-order-page`

2. **组件设计**:
- 创建一个名为`MenuItem.vue`的组件，它将代表一个3x3网格中的每个模块（方块）。这个组件应该包含三个部分：商家名称、特色菜品和操作按钮（加减号及购物车图标）。

<!-- MenuItem.vue -->
<template>
  <div class="menu-item">
    <h3>{{ 商家名称 }}</h3>
    <p>{{ 特色菜品 }}</p>
    <button @click="addToCart(+)">+</button>
    <button @click="addToCart(-)">-</button>
    <button @click="cartCount" disabled>{{ 购物车数量 }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cartCount: 0,
    };
  },
  methods: {
    addToCart(direction) {
      this.cartCount += direction;
    },
    // 其他方法...
  },
};
</script>

3. **布局组件**:
在`App.vue`或其他适当的地方，使用`v-for`指令来渲染9个`MenuItem`组件，并按照3列布局。

<!-- App.vue 或者 layout.vue -->
<template>
  <div class="grid-container">
    <div v-for="(item, index) in menuItems" :key="index" :class="{ active: isItemActive(index) }">
      <MenuItem :name="menuItemNames[index]" :dish="menuDishes[index]" />
    </div>
  </div>
  
  <!-- 提交按钮 -->
  <button @click="submitOrder">提交订单</button>
</template>

<script>
import MenuItem from './MenuItem.vue';
// 初始化数据
export default {
  components: { MenuItem },
  data() {
    return {
      menuItems: [...], // 你需要填充的9个菜单项
      menuItemNames: [...],
      menuDishes: [...],
    };
  },
  methods: {
    submitOrder() {
      alert("您已下单");
    },
    // 为3x3布局设置状态...
  },
};
</script>

4. **样式**:
使用CSS来设置布局、间距和按钮样式。例如，你可以使用Flexbox或Grid来完成3x3布局。

5. **路由和状态管理** (可选):
如果需要，可以考虑引入Vue Router处理页面导航和Vuex管理全局状态。

记得在实际应用中，还需要连接到后端API以获取和保存菜品信息，这里仅示例了前端的基本逻辑。完成以上步骤后，运行`npm run serve`启动开发服务器，就可以看到功能完整的在线点单页面了。