项目01——vue 脚手架创建项目文件夹

之前说的都是vue的基础知识，学会这些基础知识之后，就要开始写一个真正的应用（网站/系统）了。

写项目，不是和以前写原生js项目那样自己建文件夹（html，css，js）。vue提供了专门写项目的文件夹，这个文件夹如何创建，就是现在要说的：
我们要通过vue的脚手架来生成一个项目文件夹，生成的这个文件夹里面内置了很多的资源包，这些包都是为了解决一些常见问题的（例如浏览器对代码兼容的处理等），整个项目文件夹很大（一百多MB），但是在上线的时候不会上传这些开发环境资源，而且还会做项目优化，最后上线的时候不到1MB。

创建一个vue的项目文件夹，首先在你的电脑上需要安装node，为什么要node：因为我们需要用到node里面内置的npm来下载很多东西。（node直接在浏览器搜索进官网 下载安装即可），打开cmd输入node -v 检查node版本，如果输出版本号，说明node安装完成。

在电脑上安装好node之后，安装vue脚手架：在任何地方打开cmd都可以，因为node和脚手架cli都是要全局安装的，所以在任何地方都可以（一般全局安装的东西只需要安装一次，后面创建项目的时候就不用再安装脚手架了，直接vue ui创建即可）输入 npm install -g vue-cli 回车安装脚手架，等待安装完成即可（这个要几分钟）

检查一下脚手架是否安装完成：输入 vue -v

脚手架安装完成以后，准备工作就做好了，现在就可以使用脚手架来创建vue项目文件夹了
创建方式有两种，一种是通过命令行的方式创建，另一种是通过可视化面板的方式创建，相比之下，可视化的面板创建比较简单，这里我们只介绍可视化创建的这种方式。

'

在F盘新建一个文件夹（

最后创建好的vue项目就会在这个文件夹里），进入这个文件夹按住shift + 鼠标右键，在此处打开命令行cmd，然后输人 vue ui 回车 等待一会就会在浏览器打开一个网页。

进入这个网页，点击输入你的项目名称-----点击创建------ 选择npm----下一步

选择手动-----下一步

选择默认安装的配置项

1. 选择babel ---- router ---- vuex  ----使用配置文件（最后一个） 选择这4个即可，下一步
2. 选择第四个（非严格模式）

最后点击创建项目

然后会弹出是否保存预设，点击否，不保存，然后等待它生成项目文件即可（得1分钟），此时, 在cmd里面是可以看到进度的，这个可视化面板和cmd是同步的。

完了之后，把创建好的文件夹拖到编辑器打开即可，至此，vue脚手架创建项目文件夹已经完成了。