SpringBoot+Vue2 毕设实战：从零搭建你的计算机毕业设计

须知：本教程侧重毕设制作方法论的讲解与教学，具体项目的落地实施及功能迭代需由学习者自主完成

如果你遇到了这个问题：

那一定是你缺少了div标签：

如图所示改成这样就可以，在标题，按钮之外套一个div

设置发射器在json里下载，可以看笔记Springboot+vue项目笔记（一）_springboot+vue项目笔记 卓怡-CSDN博客

一张图让你看懂前端后端（bushi）

如果你碰到了这种情况

其实是：两行报错其实都指向同一个根源：项目里缺了 less-loader（或者版本不匹配），导致 .vue 文件里 <style lang="less"> 这段 Less 代码没人能编译，于是 webpack 在构建阶段直接崩掉

因为你的app.vue是：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
 
<style lang="less">
html,
body,
#app {
  width: 100%;
  height: 100%;
}
</style>

所以，我们可以参考我这个，不要去大量改动app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

---

一.登陆界面（学习方向–非传统学习）

在这之前，写登陆代码：（必要）

简单的一个界面：

效果如上

把它放在loginForm表单里

！登陆发射器比较重要：axia

先让项目停止

npm i axios

在终端输入这段代码

在项目文档README.md里粘贴这段，类似于提示编译，运行注意事项吧

遇到这种情况下载不了的：提供三种方法

这不是 axios 本身的问题，而是 npm 在帮你装 axios 时，顺便检查了整个项目的依赖树，发现 eslint 相关包版本冲突——
@vue/eslint-config-standard@6.1.0 要求 eslint-plugin-vue@^7.0.0，而你项目里已经装了 eslint-plugin-vue@8.7.1，于是 npm 7+ 直接拒绝继续，抛出 ERESOLVE 错误。

一句话：axios 没毛病，是 eslint 家族打架导致 npm 罢工。

快速解决（三选一）：

1. 只想赶紧把 axios 装进去，暂时忽略 peer 冲突（最常用）

   npm i axios --legacy-peer-deps

2. 一次性把所有旧包升到官方推荐的兼容组合（推荐，但要用 npm 8+）

   npm update @vue/eslint-config-standard eslint-plugin-vue --legacy-peer-deps
   npm i axios

3. 彻底卸载掉 standard 规范（如果你其实不用它）（我用的）

   npm uninstall @vue/eslint-config-standard
   npm i axios

以后只要再遇到 ERESOLVE could not resolve，优先加 --legacy-peer-deps 就能先让命令跑通，再视情况升/降包版本即可。

查看版本：npm list axios

npm list axios

直接复制这段进vue.config.js：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  //关闭eslint校验
  lintOnSave: false,
 
  devServer: {
    open: true,
    host: 'localhost',
    port: 8080,
    https: false,
    // 设置跨域
    proxy: {
      '/api': {
        target: 'http://localhost:9000',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^api': ''
        }
      }
    }
  }
})

不知道以上的看教程：Springboot+vue项目笔记（一）_springboot+vue项目笔记 卓怡-CSDN博客