场景描述:
node和vue版本:

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





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

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

是因为

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

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

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

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


6.项目结构分析:
旧版本项目结构:

本环境vue4版本项目结构如下:

黑笔所涂掉部分为后面增加的路由,下篇文章会讲解。
网友评论