（一）vscode搭建springboot后端项目
（二）vscode搭建vue前端项目
（三）调整vue项目src文件夹的基本结构

编写layout的头部栏和侧边栏

一、使用scss样式文件出现的问题
出现问题“Module not found: Error: Can’t resolve ‘sass-loader’ in ‘F:\bysj\vue-demo\src\layout\components’”
解决方法：npm install sass-loader
出现问题“Cannot find module ‘sass’”

解决方法：cnpm install node-sass，还没解决有可能是引用样式文件的路径问题

// 错误示范
<style>
@import '@/layout/index.scss';
</style>

// 正确示范
<style>
@import '../index.scss';
</style>

发现index.scss里样式虽然可以引用，但是只有最外面一层生效，在style后面加上lang=“scss”,又出现上面的问题，有可能是版本太高了，把package.json的node-sass和sass-loader换成以下版本后，npm install,再npm run dev

二、引用element的输入框组件

• npm install element-ui
• main.js中引入element-ui
  

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'; // 记得要引入样式，不然element-ui的样式出不来
Vue.use(ElementUI)

• 使用示例

<el-input v-model="searchInfo" placeholder=""></el-input>

三、调整路由，实现首页和排行页的路由跳转

• 修改router的Index.js文件，给对应页面配上对应的路由

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout/Index.vue'
import Homepage from '@/views/homepage/Index.vue'
import Rank from '@/views/rank/Index.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout,
      children: [
        {
          path: '/homepage',
          name: 'Homepage',
          component: Homepage
        },
        {
          path: '/rank',
          name: 'Rank',
          component: Rank
        },
      ]
    }
  ]
})

• 由于主页和排行页是layout的子页面，要在layout的组件的对应引用首页和排行页的位置加上<router-view></router-view>

// layout的Index.vue
<template>
<div class="layout-wrapper">
    <nav-bar></nav-bar>
    <router-view></router-view>
</div>
</template>

<script>
import NavBar from '@/layout/components/NavBar'
export default {
  name: 'Layout',
  components:{NavBar},
  data() {
    return {
    }
  }
}
</script>
<style>
@import './index.scss';
</style>

• 访问首页的路径
  http://localhost:8080/#/homepage
• 编写头部栏实现路由跳转

// NavBar.vue
<template>
<div class="nav-bar-wrapper">
    <div class="icon-wrapper">
      <img src="@/assets/icon.png" width="50px" height="50px">
      <img src="@/assets/title1.png" height="30px">
    </div>
    <div class="category-wrapper">
      <span 
        v-for="(categoryItem,index) in categoryList" 
        :key="index" 
        @click="ClickCategory(categoryItem)" 
        :class="categoryItem.id ===activeId ? 'text text-active' : 'text'">
        {{categoryItem.name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </span>
    </div>
    <search v-if="isShowSearch"></search>
    <div class="user-wrapper">
        <i class="iconfont pink-icon">&#xe602;</i>
        <i class="iconfont pink-icon">&nbsp;&nbsp;&#xe621;</i>
    </div>
</div>
</template>

<script>
import Search from '@/layout/components/Search'
export default {
  name: 'NavBar',
  components:{Search},
  data () {
    return {
      categoryList:[
        {
          id: 'HOMEPAGE',
          name: '首页'
        },
        {
          id: 'RANK',
          name: '排行'
        },
        {
          id: 'DISHES',
          name: '菜品'
        },
        {
          id: 'SERVICE',
          name: '服务'
        }
      ],
      activeId:'HOMEPAGE',
      isShowSearch: true,
    }
  },
  methods:{
    ClickCategory(categoryItem){
      this.activeId = categoryItem.id
      switch(categoryItem.id) {
        case 'HOMEPAGE':
          this.$router.push({ path: '/homepage' })
          break;
        case 'RANK':
          this.$router.push({ path: '/rank' })
          break;
      }
    }
  }
}
</script>
<style lang="scss">
@import '../index.scss';
</style>