Vue+Nginx环境搭建

一、开发环境搭建

1安装node.js: brew install node

前端框架一般都依赖nodejs,我们首先要安装node.js（Node.js 就是运行在服务端的 JavaScript。）

2 升级npm：cnpm install npm -g（npm -v ：npm3以上版本）

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

3 全局安装vue：cnpm install -g vue-cli

用于帮助搭建所需的Vue的开发模板框架，NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

3 安装webpack：cnpm install webpack -g

Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

二、创建基于webpack的vue项目（调试启动调试）

$ vue init webpack my-project

$cd my-project(需要一些配置，默认回车就行,可以看到监听的哪个端口)

#进入项目，安装并运行

$ npm install

$ npm run dev （开启了一个node服务器）

#成功执行以上命令后访问http://localhost:8080/

三、配置Nginx（编译部署）

1 项目路径下vue-test输入命令npm run build

2 下载配置部署，编辑nginx/conf下的nginx.conf 配置部署的端口（8088）以及编译好代码的路径（项目编译后的dist路径）

npm run dev是在开发模式下运行项目，可以加载一些调试的模块如hotload；

npm run build是项目打包命令，运行这个命令后会生成可以进行上线的打包文件，这时候打开根目录下的index.html就可以直接看到你的项目效果了