彤医通基于vue.js框架的nuxt.js服务端渲染技术（不使用AJAX）

Nuxt框架服务端渲染

nuxt框架，服务端渲染技术，SSR在服务端完成页面内容，而不是在客户端通过AJAX获取数据。
AJAX致命缺点，不利于做SEO，Server Side Render利于网页做SEO。
从此，客户端只用于显示页面，数据请求处理全在服务端执行。

1. 下载压缩包解压https://github.com/nuxt-community/starter-template/archive/master.zip
2. 修改package.json和nuxt.config.js文件，使用npm installl下载配置文件
3. 使用npm install element-ui引入element-ui组件。

layouts:页面布局 <`nuxt>，先进入布局页面，头尾信息，而引入其他pages页码内容信息。

pages:页面内容

封装axios
在utils/request.js文件中新增

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost',
  timeout: 15000 // 请求超时时间
})
// http request 拦截器
service.interceptors.request.use(
  config => {
// token 先不处理，后续使用时在完善
    return config
  },
  err => {
    return Promise.reject(err)
  })
// http response 拦截器
service.interceptors.response.use(
  response => {
    if (response.data.code !== 200) {
      Message({
        message: response.data.message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(response.data)
    } else {
      return response.data
    }
  },
  error => {
    return Promise.reject(error.response)
  })
export default service

在layouts包中抽取头部分和尾部分：
头myheader:

<template>
  <div class="header-container">
    <div class="wrapper">
      <!-- logo -->
      <div class="left-wrapper v-link selected">
        <img style="width: 50px" width="50" height="50" src="~assets/images/logo.png">
        <span class="text">尚医通 预约挂号统一平台</span>
      </div>
      <!-- 搜索框 -->
      <div class="search-wrapper">
        <div class="hospital-search animation-show">
          <el-autocomplete
            class="search-input small"
            prefix-icon="el-icon-search"
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="点击输入医院名称"
            @select="handleSelect"
          >
            <span slot="suffix" class="search-btn v-link highlight clickable selected">搜索 </span>
          </el-autocomplete>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right-wrapper">
        <span class="v-link clickable">帮助中心</span>
        <!--        <el-dropdown >-->
        <!--              <span class="el-dropdown-link">-->
        <!--                晴天<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        <!--              </span>-->
        <!--            <el-dropdown-menu class="user-name-wrapper" slot="dropdown">-->
        <!--                <el-dropdown-item>挂号订单</el-dropdown-item>-->
        <!--                <el-dropdown-item>就诊人管理</el-dropdown-item>-->
        <!--                <el-dropdown-item divided>退出登录</el-dropdown-item>-->
        <!--            </el-dropdown-menu>-->
        <!--        </el-dropdown>-->
        <span class="v-link clickable" @click="dialogUserFormVisible = true">登录/注册</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
  }
</script>

尾myfooter:

<template>
  <div class="footer-container">
    <div class="wrapper">
      <div><span class="record">京ICP备13018369号</span><span
        class="phone">电话挂号010-56253825</span></div>
      <div class="right"><span
        class="v-link clickable"> 联系我们 </span><span
        class="v-link clickable"> 合作伙伴 </span><span
        class="v-link clickable"> 用户协议 </span><span
        class="v-link clickable"> 隐私协议 </span></div>
    </div>
  </div>
</template>
<script>
  export default {
  }
</script>