前端开发环境搭建（Vue）

1.搭建Node.js开发环境

去node.js的官网下载安装包官网地址
下载完之后，进行安装，安装完之后使用下面的命令查看Node.js版本

node -v

显示以下信息，说明安装成功

查看npm的版本，npm就是一个包管理器，就像maven是java的包管理器，这个是安装Node.js的时候会自动安装的，不用手动额外安装

npm -v

显示如下信息，说明安装成功

开发中常常会使用npm来安装一些项目所需要的依赖，可以使用下面的命令来显示的指定依赖下载之后要存放的位置

npm config set prefix "D:\Tools\NodeJs\Workspace\node_global"
npm config set cache "D:\Tools\NodeJs\Workspace\node_cache"

设置完之后使用下面命令查看指定的位置是否起作用

查看使用npm命令安装的软件的位置：npm config get prefix
查看使用npm命令安装的依赖的位置：npm root -g
查看使用npm命令安装的缓存的位置（这个位置不知道是用来存放什么的）：npm config get cache

2.初始化项目开发环境

安装vue的脚手架

npm install --global vue-cli

显示以下信息说明安装成功

安装完之后需要配置环境变量才可以使用vue的相关命令，环境变量的值就是上面设置的那个npm安装依赖的位置，我这里是

D:\Tools\NodeJs\Workspace\node_global

只需要将这个位置配置在path中就行了

查看Vue的版本信息，出现以下信息说名Vue脚手架安装成功

3.创建vue项目

找到该项目需要存放的文件夹，从该路径进行cmd界面，并执行

//注意：项目名全部小写
vue create mywebproject
//然后出现两种创建方式，选择默认的创建方式就行了；默认创建方式，一路回车就行了
default（babel、eslint）
//手动创建方式，自己手动个性化创建
Manually select features

4.启动项目

进入项目文件夹执行命令

npm run serve

项目创建并启动成功，可以看到相关页面！

5.npm相关

npm install X:
  会把X包安装到node_modules目录中
  不会修改package.json（就是不会修改项目的依赖）
  之后运行npm install命令时，不会自动安装X（因为npm install是根据package.json文件中的dependencies来安装依赖的，就像maven中安装依赖是根据pom.xml文件中的dependencies来安装的一样）

npm install X –save:
  会把X包安装到node_modules目录中
  会在package.json的dependencies属性下添加X
  之后运行npm install命令时，会自动安装X到node_modules目录中
  之后运行npm install
  –production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中

npm install X –save-dev:
  会把X包安装到node_modules目录中
  会在package.json的devDependencies属性下添加X
  之后运行npm install命令时，会自动安装X到node_modules目录中
  之后运行npm install
  –production或者注明NODE_ENV变量值为production时，不会自动安装X到node_modules目录中

使用原则:
运行时需要用到的包使用–save，否则使用–save-dev。