【Vue.js学习笔记】9：搭建Vue-CLI脚手架并创建Vue项目,在WebStorm中创建Vue项目

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

搭建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这一步了。

在WebStorm中创建Vue项目

只贴第一步，后面的和vue init之后提示配置一样。