0.前期准备-后台管理系统

0.前期准备-后台管理系统

项目资料汇总： https://shimo.im/docs/5xkGMv6jpgCj783X/read
带你从0搭建一个Springboot+vue前后端分离项目，真的很简单！ https://www.bilibili.com/video/BV14y4y1M7Nc

1.下载nodejs

参照其他博主博客

2.检测nodejs是否安装好

通过命令查看是否安装好，通过命令查看安装版本

node -v

查看npm是否安装好

npm -v

3.安装vue插件并检查

到官网上查找

[链接](https://v3.cn.vuejs.org/guide/introduction.html)

修改下载源为阿里源

npm config set registry https://registry.npmmirror.com

通过在文件目录输入cmd指令，直接进入文件夹下

cmd

下载最新稳定版

# 最新稳定版
$ npm install vue@next

要升级，你应该需要全局重新安装最新版本的 @vue/cli：

npm install -g @vue/cli

可以用这个命令来检查其版本是否正确：
vue --version

4.使用vue插件创建项目

在cmd命令行中输入命令

vue create springboot-vue-demo

进入菜单栏后

选中
manually  select features

选中，通过空格进行选中，按Enter的话会变成大冤种的

babel
router
vuex

选择版本为3.x

使用history模式 输入Y

选择 in package json

之后询问 ? Save this as a preset for future projects? (y/N)N，选择n

然后项目就创建成功了

5.按照给与的提示运行项目

cd springboot-vue-demo
yarn serve

这里出现问题 yarn serve命令无法使用

E:\springBoot+Vue框架\springboot-vue-demo>yarn serve
错误: 找不到或无法加载主类 serve
原因: java.lang.ClassNotFoundException: serve

可以尝试将包改为npm

创建vue/cli3.x.x时，默认使用yarn作为包管理器，怎么修改为npm呢？ 
https://blog.csdn.net/qq_41880073/article/details/117035551

重新安装后

按照给与的提示运行项目

cd springboot-vue-demo
npm run serve

6.访问页面

http://localhost:8080/
http://192.168.1.102:8080/

测试完后，终止页面

ctrl+c 

7.通过idea快速启动项目

将前面的项目拖动到idea中

add configration

选中npm项目

将Scripts中内容填入为serve

之后就能快捷启动了

之后可以按照常规，点击绿色按钮运行，并访问网址

8.或许可以通过hbuildx进行启动

9.修改配置文件，自动打开网页

修改pakeage.json文件

{
  "name": "springboot-vue-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build"
  }
}
原内容 无 --open参数
"scripts": {
    "serve": "vue-cli-service serve ",
    "build": "vue-cli-service build"
  }

遇见问题

vue设置浏览器自动打开网址为 http://0.0.0.0:8080/
而不是http://localhost:8080

参考博客 https://blog.csdn.net/anjing31/article/details/125281505

修改vue.config.js内容为

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: 'localhost',
    port: 8080
  }
})