vue项目环境快速搭建，语法使用，以及webpack项目打包，nginx发布站点的定义和基础命令的使用

　　1、安装Nodejs环境——nodejs 是一个js运行环境（官网http://nodejs.cn/api/），Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

 

　　2、安装Npm -安装命令：npm install npm -g (-g这里最好全局安装。)

　　Npm是包管理工具(详情请见http://www.runoob.com/nodejs/nodejs-npm.html)

　　功能：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上 传到NPM服务器供别人使用

　　使用命令:npm install 安装模块，-S, --save 安装包信息将加入到dependencies（生产阶段的依赖），D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），-O, --save-optional 安装包信息将加入到optionalDependencies（可选阶段的依赖），全局安装（global）,使用-g 或 --global，npm uninstall卸载模块，npm update更新模块

 

　　3、安装vue-cli：安装命令npm install vue-cli

　　vue-cli是官方快速构建单页应用的脚手架

　　目录文件夹的作用:build --构建脚本目录(必须)

       config--构建配置目录(必须)

　　node_modules  --依赖的node工具包目录(必须)

　　src--源码目录(必须)

　　assets--资源目录

　　components --组件目录

　　app.vue 页面级vue组件(必须)

　　mian.js 页面入口js文件(必须)

　　static 静态文件目录

　　test 测试文件目录

　　index.html 入口页面(必须)

　　pachage.json  项目描述文件(必须)

　　.eslintrc.js  ES语法检查配置

 

　　4、webpack  （入门--https://www.jianshu.com/p/42e11515c10f）--官方文档https://doc.webpack-china.org/concepts/--模块打包器(最大的好处应该是可以打包更多不同类型的文件)

　　分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

　　如果已经下载了vue-cli，webpack默认已安装。

　　如果自定义安装webpack：npm install webpack webpack-dev-server

　　好处

　　1、模块化：让我们可以把复杂的程序细化为小的文件;

　　2、类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；

　　3、Scss，less等CSS预处理器

　　Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

　　webpack打包命令 webpack entry.js output.js

　　entry.js 打包的入口文件

　　output.js 打包后的文件//运行命令后生成的js文件，

 

　　5、 Vue--渐进式框架(https://cn.vuejs.org/v2/guide/)

　　基础语法：a.创建一个实例 new Vue({// 选项})

　　b.样式和style绑定:v-bind:class,v-bind:style,其他的html 属性类似这种例如id属性v-bind:id,href属性v-bind:href

　　c.条件(v-if,v-else,v-else-if)、展示元素(v-show)

　　循环(v-for),读取文本{{}}

　　d.事件(v-on监听)：点击(v-on:click),事件修饰符 (.stop、.prevent.capture、.self、.once、)

　　E.表单绑定:静态属性绑定(v-model)、动态属性绑定(v-bind)

　　修饰符(lazy事件触发后进行,number值转为数值类型,trim过 滤空字符串

　　f. vue属性(data：数据,methods 事件，watch:监听，mounted: 每次刷新访问.

 

　　6、Nginx发布

　　nginx -- 是一个高性能的HTTP和反向代理服务器，也是一个 IMAP/POP3/SMTP服务器。(可以部署linux和windows)官方文档： http://www.nginx.cn/doc/

　　1、安装 (特别注意此软件在Windows系统只能安装到系统盘，其他盘一律不支持)

　　start nginx : 启动nginx，nginx -s reload  ：修改配置后重新加载生效(每次修改nginx.conf后必 须执行)，nginx -s reopen  ：重新打开日志文件，nginx -t -c /path/to/nginx.conf 测试nginx配置文件是否正确

　　nginx -s  stop  :快速停止nginx，nginx -s quit  ：完整有序的停止nginx

　　nginx做负载均衡(负载和发布网站需要开启不同nginx，不能放在同一个里面)

　　upstream server{#server为你的真实访问地址

　　server 192.168.1.1:90weight=5; #真实服务器A(test1)
　　server 192.168.1.2:90 weight=5; #真实服务器B(test1)
　　}

　　location / {

　　proxy_pass http://server; #反向代理2，也可做负载均衡。
　　proxy_redirect off;
　　}