springboot+vue实战-第三篇--visual stu

场景描述：
node和vue版本:

image.png

1.创建项目：
此目录下:
D:\vuepage\vuecloudproject

image.png
image.png
image.png
image.png
image.png

以上因为已经创建好，只是演示怎么创建，忽略已存在的东东
2.vs打开项目

image.png
3.终端运行，输入命令:
npm install
报错如下:
image.png

是因为

image.png

删除node_modules文件夹，再次执行npm install即可。
4.运行npm run dev
报错如下:

image.png

原因:命令用习惯了，这是不好滴，版本现在是4.1了，可以打开package.json文件看下,如图:

image.png

明白了吧，人这里是npm run serve。
不过，还想用dev的话，修改即可，如图:

image.png

5.运行成功后,访问:http://localhost:8080/

image.png
image.png
6.项目结构分析：
旧版本项目结构:
image.png
本环境vue4版本项目结构如下:
image.png
黑笔所涂掉部分为后面增加的路由，下篇文章会讲解。