node-Vue 环境搭建
一、下载node，安装node
1、下载地址
2、设定node全局目录和缓存目录。配置npm的全局模块的存放路径、cache的路径，此处我选择放在：D:\Program Files\nodejs
输入如下命令：
npm config set prefix "D:\ProgramFiles\nodejs\node_global"
npm config set cache"D:\ProgramFiles\nodejs\node_cache"
3、在系统环境变量添加NODE_PATH,输入路径为：
D:\Program Files\nodejs\node_global
操作如下：我的电脑右击，打开属性->高级系统设置->环境变量->新建（系统变量下）->输入变量名NODE_PATH->变量值：输入上面路径，确定即可。
4、替换淘宝源，安装cnpm，输入以下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
二、安装配置Vue
1、安装vue
在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
npm install vue -g
2、安装命令行工具 (CLI)
Vue 提供了一个官方的 CLI，为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅Vue CLI 的文档。
安装vue-cli
vue-cli用于快速搭建大型单页应用,可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
cnpm install vue-cli -g
3、新建vue项目
新建一个项目文件夹，进入该文件夹后敲以下命令初始化一个vue项目
vue init webpack 项目名称
其中webpack为vue的其中一个模板。
查看帮助得知，如果自己的github仓库上 己有模板也可指定github上的仓库来初始化项目。
Project name vue-start //项目名称
Project description A Vue.js project // 项目描述
Author // 作者名称
Vue build standalone // 推荐选前者
Install vue-router
// 是否安装vue-router路由组件，也可不安装使用第三方或简单的项目自己写
Use ESLint to lint your code
// 是否使用eslint管理代码，个人项目不推荐
Set up unti tests
// 是否使用karma来做单元测试
Setup e2e tests with Nightwatch
// 是否安装e2e测试
Should we run 'npm install' for you after the project has been created
// 选择使用npm或yarn进行安装模块
4、运行服务
进入项目目录，按之前看到的提示，运行npm run dev命令进入开发
默认监听8080端口，服务器己经启动，目前是在开发环境下。
访问默认的localhost:8080，出现的就是vue的欢迎页面如下，表示正常，退出监听，直接关闭cmd窗口即可。
5、目录结构
build -- 大部分是webpack的配置文件
config -- 配置文件，比如配置监听端口
node_modules -- 依赖包都在这里
src -- 主工程文件夹，基本上所有的开发都在这个文件夹进行
static -- 静态文件目录
package.json -- 项目的一些配置信息
6、发布打包，前端部署
当项目开发完毕，只需要运行一行命令就可以打包你的应用
# 打包正式环境
npm run build:prod
# 打包预发布环境
npm run build:stage
构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js、***.css、index.html 等静态文件。
通常情况下 dist 文件夹的静态文件发布到你的 nginx 或者静态服务器即可，其中的 index.html 是后台服务的入口页面。
7、环境变量
所有测试环境或者正式环境变量的配置都在 .env.development等 .env.xxxx文件中。
它们都会通过 webpack.DefinePlugin 插件注入到全局。
三、配置Nginx代理静态页面
1、安装下载Nginx，下载地址
2、下载后解压，配置Nginx.conf
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root f:/vue-project/dist;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location /prod-api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://localhost:8080/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
