Web新版技术点及环境安装

2017-08-16 本文已影响18人肖一林

新版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等错误状态码或服务器维护状态下的统一处理及重试
接口返回报文格式异常处理