【Vue环境搭建】Vue环境搭建并启动

一.安装node.js及环境配置

1.Nodejs下载及安装

• 下载地址：下载 | Node.js
• 根据我的系统及位数，我选择windows64位.msi格式安装包（如图），如果想下载其他版本可以选择下方的以往版本选择性下载；

• 安装过程一路Next，看个人需不需要设置安装路径等；
• 配置环境变量，此电脑-属性-高级系统设置-环境变量-系统变量-path-编辑，添加新装的node地址：

• 安装及环境配置后验证，任意路径cmd输入以下命令出现相应版本号：

node -v   #查看node版本
npm -v    #查看npm版本

2.Npm镜像配置

• 后端过来的伙伴可以理解为maven镜像修改，尤其是在公司内网，连不到外网镜像必须使用公司自己的镜像，如下为修改为公司自己的镜像仓(http://repos.xxxxxxxx.com/repository/api/npm/npm-group/)；
• 任意路径cmd输入:npm config set registry http://repos.xxxxxxxx.com/repository/api/npm/npm-group/

3.常用模块安装

• 安装最常用的express模块：npm install express -g
• 全局安装vue：任意路径cmd：npm install vue-cli -g   安装vue，成功后输入vue会输出相关信息。

4.Vue项目启动

• npm项目依赖组件安装：项目根目录下运行 npm install，会根据前端项目的依赖关系（package.json）下载好相关的组件，存在项目目录的node_modules文件夹下；
• npm编译：项目的根目录运行 npm run build，会对根目录下的package.json对build命令的定义进行编译，一般"build" = "webpack -p"。
• 以上步骤成功完成后，前端项目就顺利启动啦！