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