VUE搭建分布式医疗挂号系统后台管理页面示例步骤

以下是针对 "VUE搭建分布式医疗挂号系统后台管理页面" 的完整攻略，具体步骤如下：

1. 创建Vue项目

首先，我们需要使用Vue CLI来创建一个Vue项目。在命令行中输入以下命令：

vue create medical-admin

这将创建一个名为 medical-admin 的项目，并安装Vue的依赖项。

2. 安装Element UI库

由于我们将使用Element UI组件库来构建我们的后台管理页面，所以我们需要安装Element UI。在命令行中输入以下命令：

npm install element-ui

然后在Vue项目的 main.js 文件中引入Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 配置路由

为了创建我们的后台管理页面，我们需要配置Vue路由器。我们可以通过在 src/router/index.js 文件中添加以下内容来完成配置：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
import Main from '@/views/Main.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Main',
      component: Main
    }
  ]
})

export default router

在上面的代码中，我们使用Vue路由器创建了两个路由：一个用于登录页面，另一个用于后台管理页面。这些路由都具有相应的组件，分别位于 src/views/Login.vue 和 src/views/Main.vue。

4. 开始创建页面

现在我们已经完成了Vue项目的初始化设置，可以开始使用Element UI组件库创建我们的后台管理页面了。

4.1 创建登录页面

首先，我们需要创建一个登录页。在 src/views/Login.vue 文件中添加以下代码：

<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="form" label-width="80px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      // TODO: 处理登录逻辑
    }
  }
};
</script>

<style>
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在上面的代码中，我们使用Element UI组件创建了一个登录表单，并在 login() 方法中添加了处理登录逻辑的代码。

4.2 创建后台管理页

接下来，我们需要创建一个后台管理页面。在 src/views/Main.vue 文件中添加以下代码：

<template>
  <div class="main-container">
    <el-header>
      <div class="logo">医疗系统</div>
      <el-menu default-active="1" class="menu" theme="dark" mode="horizontal">
        <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-menu-item index="3">科室管理</el-menu-item>
        <el-menu-item index="4">医生管理</el-menu-item>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {};
  }
};
</script>

<style>
.main-container {
  width: 100%;
  height: 100%;
}

.logo {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}

.menu {
  line-height: 60px;
}

.el-menu-item,
.el-submenu__title {
  font-size: 16px;
}
</style>

在上面的代码中，我们使用了Element UI组件库的 header、menu、submenu、container、aside 和 main 组件来创建我们的后台管理页面。在这个页面中，我们创建了一个 header，其中包含了一个 menu，以及一个带有 logo 的主标题。menu 有四个项：首页，两个用户管理子项，科室管理和医生管理。除此之外，我们还使用了 container、aside 和 main 组件来实现页面布局。