使用VUE2写一个工厂管理的首页

好的，我可以为您提供一个基本的VUE2代码示例，展示如何创建一个工厂管理首页。在这个示例中，我们将使用Vue CLI来创建项目，并使用Element UI库来构建UI。

首先，需要安装Vue CLI，如果您还没有安装，可以使用以下命令安装：

npm install -g @vue/cli

接下来，使用以下命令创建Vue项目：

vue create factory-management

在创建项目时，选择默认配置即可。

安装Element UI库：

npm i element-ui -S

现在可以开始编写代码了。首先，在`App.vue`组件中添加一个`el-container`元素，将页面分为头部、侧边栏和主要内容三个部分。

<template>
  <div id="app">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <h1>工厂管理</h1>
      </el-header>
      <!-- 侧边栏 -->
      <el-aside>
        <!-- todo -->
      </el-aside>
      <!-- 主要内容 -->
      <el-main>
        <!-- todo -->
      </el-main>
    </el-container>
  </div>
</template>

接下来，我们需要在侧边栏中添加导航菜单。使用`el-menu`元素和`el-menu-item`子元素来实现导航菜单。

<template>
  <div id="app">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <h1>工厂管理</h1>
      </el-header>
      <!-- 侧边栏 -->
      <el-aside>
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">工厂管理</template>
            <el-menu-item index="2-1">工厂列表</el-menu-item>
            <el-menu-item index="2-2">添加工厂</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">订单管理</template>
            <el-menu-item index="3-1">订单列表</el-menu-item>
            <el-menu-item index="3-2">添加订单</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主要内容 -->
      <el-main>
        <!-- todo -->
      </el-main>
    </el-container>
  </div>
</template>

在上面的代码中，我们添加了一个菜单项和两个子菜单项，分别是工厂管理和订单管理。当用户点击菜单项时，会触发`handleMenuSelect`方法。

现在，我们需要在主要内容区域中添加一个欢迎信息。在`el-main`元素中添加一个`h2`标签即可。

<template>
  <div id="app">
    <el-container>
      <!-- 头部 -->
      <el-header>
        <h1>工厂管理</h1>
      </el-header>
      <!-- 侧边栏 -->
      <el-aside>
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">工厂管理</template>
            <el-menu-item index="2-1">工厂列表</el-menu-item>
            <el-menu-item index="2-2">添加工厂</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">订单管理</template>
            <el-menu-item index="3-1">订单列表</el-menu-item>
            <el-menu-item index="3-2">添加订单</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主要内容 -->
      <el-main>
        <h2>欢迎使用工厂管理系统！</h2>
      </el-main>
    </el-container>
  </div>
</template>

最后，我们需要在`script`标签中添加`activeMenu`和`handleMenuSelect`属性。

<script>
export default {
  name: 'App',
  data() {
    return {
      activeMenu: '1'
    }
  },
  methods: {
    handleMenuSelect(index, indexPath) {
      this.activeMenu = index;
    }
  }
}
</script>

现在，我们已经完成了一个简单的工厂管理首页。您可以根据自己的需求对其进行定制和扩展。