环境搭建-运行前端工程（vue）

一、环境准备

npm: nodejs 下的包管理器。

nrm：npm下载镜像源切换工具。

webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的准备，比如资源的合并和打包。

1.1 安装nodejs

https://nodejs.org/zh-cn/ 下载安装。

Node.js 下载安装包之后，直接下一步直到安装完成。安装完成后可以在命令行中输入 node -v 查看安装的版本了解安装情况。

1.2 设置nodejs环境

1）在node.js安装目录下新建两个文件夹 node_global和node_cache

2）在cmd命令行下执行如下两个命令：

npm config set prefix "node.js安装目录\node_global"

npm config set cache "node.js安装目录\node_cache"

3）配置系统环境变量NODE_HOME

1.3 安装nrm

npm install nrm -g

npm config set registry https://registry.npmmirror.com

1.4 安装webpack

npm install webpack@4.30.0 -g

npm install webpack-cli@3.3.2 -g

二、启动前端项目

2.1 导入工程

然后IDEA打开 前端工程，再使用命令行进入到前端项目中执行如下命令下载或更新项目中使用到的js包

-- 下载js包
npm install

npm update

-- 启动项目
npm run dev

2.2 查看配置

打开 config\index.js 文件；一般情况下，需要指定后端服务器的地址。（因为我们部署在本地，所以这边目前不需要修改）

2.3 访问项目首页

访问前端项目：http://localhost:8080