vscode+springboot+vue前后端分离实现饭店点餐管理系统（四）

2021-02-09 18:01:49 阅读：208 来源： 互联网

标签：scss vue layout springboot vscode nbsp import name

（一）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>

标签：scss,vue,layout,springboot,vscode,nbsp,import,name
来源： https://blog.csdn.net/By_Moonlight/article/details/113681700

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vscode+springboot+vue前后端分离实现饭店点餐管理系统（四）

编写layout的头部栏和侧边栏