Springboot+Vue脚手架搭建(使用IDEA)

软件安装

mysql

jdk 1.8

nodejs 14或者16

idea

navicat 16 (mysql可视化操作的软件)

项目结构

将springboot添加为maven项目

pom.xml添加为maven

Vue脚手架搭建

正式项目开启

新建目录 小白做毕设2024

脚手架工具：介绍 | Vue CLI

win+R 输入cmd 打开命令行窗口输入以下命令

npm install -g @vue/cli
 
vue --version
 
 // 进入目录小白做毕设2024
 vue create vue

选Mannully select featrues

空格选择

再选择N

成功界面

cd vue
 npm run serve

配置

vue.config.js

const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true,
   devServer: {
     port: 7000
   },
   chainWebpack: config =>{
     config.plugin('html')
         .tap(args => {
           args[0].title = "青哥哥好帅啊";
           return args;
         })
   }
 })

App.vue

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

HomeView.vue

  <template>
     <div>
       主页
     </div>
   </template>
   
   <script>
   
   export default {
     name: 'HomeView'
   }
   </script>

router.js

import Vue from 'vue'
 import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
     name: 'home',
     component: () => import('../views/HomeView.vue')
   }
 ]
 
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,
   routes
 })
 
 export default router

global.css

* {
     box-sizing: border-box;
 }
 body {
     color: #333;
     font-size: 14px;
     margin: 0;
     padding: 0;
 }

配置Vue(Idea)

---

创建好vue之后输入以下命令

有node_moudules-library成功

设置启动项

vue

连接数据库