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