在一个干净的环境里，要从头开始创建一个脚手架项目，首先我们要安装nodejs，nodejs起个什么作用呢？nodejs是一个可以让前端运行在nodejs提供的服务器上的一个工具，换句话说就是nodejs提供了一个服务器，以下，我们一步一步的来创建一个脚手架项目。

1.安装node.js

打开官网，直接安装nodejs，安装完成以后，打开命令行工具cmd，输入node -v查看node版本

2.使用nodejs安装vue-cli脚手架

在cmd中使用命令npm install  -g @vue/cli

npm 是nodejs的命令，install意为安装 @vue/cli是vue脚手架 -g指的是全局安装，安装完成后如下:

3.安装完成vue-cli脚手架工具以后，我们就可以通过vue-cli来创建一个简单的项目了

首先打开我们要创建项目的文件夹，例如：

我们在c盘目录下，创建了一个"vue项目"这样一个文件夹，

现在，我们在顶部的地址栏中输入cmd回车，出现如下界面

4.输入命令vue list 就可以查看使用vue如何创建相关内容

5，我们使用vue create myproject来创建一个我的项目，输入命令如下

 在vue脚手架创建项目的时候，有红色框内的两个选项

default(babel,eslint):创建一个默认带有babel（javascript编译器，即就是将javascript语法向下兼容，让所有新的老的浏览器都认识的js语言，比如最新的es6，有些浏览器还不能识别，但是我们使用babel编译就可以将es6编译为es5从而被无法识别的浏览器识别，说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言）和eslint（语法校验器）默认的一个项目

Manually select features:自定义选择创建项目，如果我们项目中要用到路由，状态管理等一系列技术的时候，我们就可以选择自定义选项，现在我们选择这个选项，根据提示选择相关的技术加入到vue项目中，这一步省略，创建完成后出现

使用命令cd myproject进入到当前项目目录下，再使用npm run serve 来运行当前项目

运行完成后，我们在浏览器中输入地址http://localhost:8081/就能看到创建的项目了

此时，我们打开vscode代码编译器，右键将项目导入到编译器中，可以看到目录结构如下

代开package.json,我们看到结构如下

dependencies和devDependencies

devDependencies:开发依赖（development dependencies）

dependencies：生产依赖

devDependencies就是在项目开发过程中，我们需要安装的一些模块，在项目打包时候，我们无需打包在内的模块，安装命令为--save-dev，例如gulp,压缩css,js的模块，这些模块在我们的项目部署的时候，是不需要的，所以我们安装的命令就是--save-dev的形式安装 ，像express这些模块是项目运行必备的，所以就需要安装到dependencies中去,安装命令就是--save

安装模块到生产依赖(dependencies)命令：npm install --save moduleName(模块名)

1.安装模块到项目node_modules目录下

2.会将模块写入到dependencies节点。

3.运行npm install 初始化项目时候，会将模块下载到项目目录下。

4.运行npm install --production 或者注明NODE_ENV变量为production时候，会自动下载模块到node_modules目录中去。

安装模块到开发环境依赖(devDependencies)命令：npm install --save moduleName(模块名)

1.安装模块到项目node_modules目录下

2.会将模块写入到devDependencies节点。

3.运行npm install 初始化项目时候，会将模块下载到项目目录下。

4.运行npm install --production 或者注明NODE_ENV变量为production时候，不会自动下载模块到node_modules目录中去。

总结:

npm install 初始化项目安装所有依赖，

npm install --production 安装生产依赖

npm install  --save moduleName(模块名) 安装模块到生产环境依赖

npm install --save-dev  moduleName(模块名) 安装模块到开发环境依赖