Web新版技术点及环境安装

新版Web项目将采用vue替换掉jsp，实现前后端分离。前端由Vue来展示页面，后台继续使用WebControler提供接口服务。目前整理的需要掌握的技术点：JavaScript基础，HTML5，JQuery，CSS，Less，Vue，需要了解的技术WebPacke，NodeJS,通讯框架定位axios

Mac下的环境搭建

检查brew是否可用

brew help
brew update
brew cleanup
brew doctor

可能会有一些警告，如果警告不影响使用，无视。

安装node

不知道node和npm是什么可自行百度

brew install node

这个会持续一段时间，因为9成可能你的brew要更新，耐心等就好了

安装路径：/usr/local/Cellar/node/7.7.1_1
查看帮助文档: npm help
查看npm版本：npm -v
全局安装项目: npm install project-name -g

安装webpack

上一步可以用npm了，那就可以用npm来安装webpack等其他一系列的软了

npm install webpack -g
安装完成后webpack路径:/usr/local/lib/node_modules/webpack
npm也在这个目录下
查看webpack版本号：webpack -v

安装Vue

npm install vue -g
安装完成后vue路径:/usr/local/lib/node_modules/vue

安装vue-cli 脚手架

npm install vue-cli -g
查看vue版本号：vue -V
注意V一定要大写

安装Python

Node服务是需要Python环境的，Mac本身自带的有Python环境，一般情况不用安装了，Windows环境下需要安装Python2.7+

axios

安装

全局安装：npm install axios -g
项目安装：cd project-path & npm install axios -save-dev

配置文件参考：https://blog.ygxdxx.com/2017/01/29/Axios-Config/

开发环境

目前开发工具（IDE）使用WebStorm for Mac

破解方法：激活页面选择License Server 
License Server Address：http://idea.iteblog.com/key.php

选择Enable opening files and projects from the command line
/usr/local/bin/webstorm

keymap scheme 快捷键：Mac OS X 10.5+ Theme
默认项目路径：～/WebstormProjects/projectName

Tips

• ESLint,unit,e2e都是管理测试工具包
• vue init webpack projcet-name 用于创建一个依赖webpack架构的新项目
• vue list 可以查看vue官方提供的所有项目架构，比如webpack，simple，pwa等
• vue router官方名字叫路由，这个解释其实和路由没毛线关系，这个就起到一个href映射的作用，当什么路径什么参数的时候访问那个vue页面。如果觉得我这个解释不对，请参照官方文档。
• 使用ES6编码规范，并且直接使用Vue2
• babel是一个 JavaScript 编译器，可以让你写ES6的编码在不支持ES6的浏览器上之形成浏览器支持的代码
• SPA 单页面应用，一个名次，不懂的自己查～

尤大的解释：处理尚未成为标准的提案
如何针对不同平台的支持情况，减少无用特性的编译
作为一个编译工具链，给予用户实验、甚至是实现非标准的语言扩展的能力

一些文档路径

• 编码规范 http://codeguide.bootcss.com/
• Vue2中文文档 https://cn.vuejs.org/
• Vue2中文API https://cn.vuejs.org/v2/api/
• Vue github开源地址：https://github.com/vuejs/vue
• NodeJs中文API http://nodejs.cn/api/
• Vue2-router中文API https://router.vuejs.org/zh-cn/
• juqery中文API http://www.jquery123.com/
• W3C英文API http://w3schools.bootcss.com/default.html
• LessAPI http://www.bootcss.com/p/lesscss/
• webpack API https://webpack.bootcss.com/guides/

可参考开源项目

• 成型项目1 https://github.com/shinygang/Vue-cnodejs
• 成型项目2 https://github.com/hxvin/vue-home
• 饿了么出品的Vue2的web UI工具套件https://github.com/ElemeFE/element
• 基于Vue和WeUI的组件库 https://github.com/airyland/vux
• mint-ui Vue 2的移动UI元素
• 基于Vuejs的开源UI组件库 https://github.com/iview/iview
• 我太懒了，找到一个开源组件全集blog http://www.jianshu.com/p/58e72750cc62

一些好的博客

• Vue 组件化开发实践 https://juejin.im/entry/55f77eb460b28e6a6f0f4f86
• vue作者尤雨溪的github https://github.com/yyx990803
• 轻量高效的前端组件化方案 http://www.csdn.net/article/1970-01-01/2825439

讨论

• 本项目是否适构建一个SPA项目？
• 前端垃圾信息请求过滤（正则判断手机号格式等。）
• http 及https通讯的支持及Url过滤参数过滤（网络请求的上传字段格式公共参数等）
• cookie的维护？
• http协议相关配置？
• Session保存方案
• 登录状态校验方案
• 异常处理页面404500等错误状态码或服务器维护状态下的统一处理及重试
• 接口返回报文格式异常处理