【Vue.js学习笔记】9:使用npm搭建Vue-CLI脚手架并创建Vue项目

版权声明:本文为博主原创学习笔记,如需转载请注明来源。 https://blog.csdn.net/SHU15121856/article/details/85258916

在第一篇的时候确实可以创建,这次跟着视频搭建一次,比较一下和上次的区别,更正一下上次的错误操作,加深理解。

重新搭建Vue-CLI脚手架

在Node.js的安装目录下,删除node_cache/node_global下的所有内容,即让Node处于刚刚安装完成的状态,连cnpm也一起删掉了。

使用npm install --global vue-cli安装一下Vue脚手架,安装好后使用vue-V能看到版本号,说明已经安装好了,可以使用vue命令了。

创建Vue项目

去到要创建Vue项目的父目录,使用vue init webpack 项目名称来创建一个Vue项目。接下来根据提示配置一下项目,对于要使用默认配置的项直接回车就好。最后一项选择手动处理:
在这里插入图片描述
最终会提示接下来需要做什么:
在这里插入图片描述
先执行一下前两步,执行完如下:
在这里插入图片描述
前两步即是在Vue项目中创建node_modules/package-lock.json,从项目目录中文件的创建时间就可以看出:
在这里插入图片描述

运行Vue项目

运行npm run dev,在build全部完成后可以看到:
在这里插入图片描述
浏览器打开相应的页面,可以看到Vue的欢迎页。
在这里插入图片描述
在命令行CTRL+C结束运行。

回顾上一次的操作

除了直接使用npm和上次使用的是cnpm的区别之外,区别主要在于:上次是先执行了cnpm install vue在目录下先生成了node_modules/(为什么没生成package-lock.json),在后面才使用vue init去创建项目,然而这个项目却不是在父目录创建的(也就是和刚刚安装的node依赖没关系了)。

另外,上次在使用vue init创建项目的最后一步似乎选择了yes,也就让它自动执行了cnpm install,所以在最后的“下一步提示”中没有cnpm install这一步了。

猜你喜欢

转载自blog.csdn.net/SHU15121856/article/details/85258916