美文网首页
springboot+vue实战-第三篇--visual stu

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

作者: 楼兰King | 来源:发表于2020-09-30 11:16 被阅读0次

场景描述:
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
黑笔所涂掉部分为后面增加的路由,下篇文章会讲解。

相关文章

网友评论

      本文标题:springboot+vue实战-第三篇--visual stu

      本文链接:https://www.haomeiwen.com/subject/ofeuuktx.html