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

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

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

1.下载nodejs

参照其他博主博客

2.检测nodejs是否安装好

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

node -v
1

查看npm是否安装好

npm -v
1

3.安装vue插件并检查

到官网上查找

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

修改下载源为阿里源

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

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

cmd
1

下载最新稳定版

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

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

npm install -g @vue/cli
1

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

4.使用vue插件创建项目

在cmd命令行中输入命令

vue create springboot-vue-demo
1

进入菜单栏后

选中
manually  select features
1
2

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

babel
router
vuex
1
2
3

选择版本为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
1
2

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

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

可以尝试将包改为npm

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

重新安装后

按照给与的提示运行项目

cd springboot-vue-demo
npm run serve
1
2

6.访问页面

http://localhost:8080/
http://192.168.1.102:8080/
1
2

测试完后，终止页面

ctrl+c 
1

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"
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

遇见问题

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

参考博客 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
  }
})
1
2
3
4
5
6
7
8