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

最新推荐文章于 2024-10-14 17:59:17 发布

原创

最新推荐文章于 2024-10-14 17:59:17 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

该博客讲述了如何使用VSCode搭建SpringBoot后端和Vue前端项目，调整Vue项目src结构，并详细描述了在编写layout头部栏和侧边栏时遇到的scss样式文件问题及其解决方法。同时，介绍了如何引入并使用Element-UI的输入框组件，以及调整Vue路由以实现首页和排行页的路由跳转。

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