周界新起的联动系统，采用了VUE技能栈。此次内部培训将vue实战中的遇到的一些坑及解决方案分享给大家。此外准备了一些vue基本操作分享给后端的小伙伴，在以后的vue项目开发中，就选不会写也能看得懂。
项目案例
- 项目：LINKAGE
- 项目描述：Linkage是周界独立的联动系统，主要用于管理系统管理设备及联动设备 增删查改，控制设备物理开关
- 技能栈：vue全家桶（vue-cli3,vue-route,vuex）;axios;iview;websocket;
- 项目地址：http://172.16.151.221:8080/linkage/#/
vue的起手式
vue 数据模板
v-bind
v-if
v-for
v-on
v-model 双向数据绑定
vue的生命周期
vue全家桶+iview的环境搭建
> node环境搭建
- - windows官网下载安装包，下一步下一步安装完成
- - mac os官网下载安装包，下一步下一步安装完成,配置环境变量
- - node -v 检测node是否安装
- - npm -v 检测npm是否安装
> vue cli3安装
- - npm install -g @vue/cli
- - vue --version检测vue-cli是否安装
- - vue ui 启动项目管理器
> iview安装
- - vue cli创建项目
- - vue cli安装所需插件（vue-route,vux,axios,iview）
- - 打开官网开始cv（开个玩笑）开始开发
- - https://www.iviewui.com/docs/guide/install
> 项目启动（命令启动）
- - npm run serve(项目启动)
- - npm run build(项目编译)
开发前的最后准备
> Axios 拦截封装
> webpack 配置
> websocket 全局配置
- 声明全局变量并挂在到vue实例上
- 入口文件创建websocket连接
- 子页面websocket回调使用
实战填坑
> Axios 操作请求（post,put,delete）
- 在做操作请求前，axios会默认发送一个options 预检，此时在调用接口时浏览器永远都报302，原因就是后台没有处理opttions接口跨域，同时前端也百思不得其解，为什么我发送一个post请求，会执行opttions接口，紧接着就开始了前后撕逼大战。
- 解决方案1：后台处理opptions跨域问题
- 解决方案2：如果项目架构未使用restful接口规范，可都使用get请求格式，不会发送opptions接口预检（很low）
> iview 表单验证问题
- 在表单验证及数据回显二次验证时 你肯定会遇到一个这样的问题，新建表单是 int数据填写验证没有任何问题，但修改时2次验证却不能通过，原因是上传数据类型和你的form验证类型不同步导致。
- 解决方案1：数据回填时，将需要验证的string数据转为int类型。
- 解决方案2：上传数据时将string转化为int类型，如果后台没有做特殊处理，那么返回的也是int类型
> iview table组件个性化
- 在iview table组件中我们经常需要做一些个性格操作，列入某一行要select下拉框，输入框绑定事件等等，但是官方文档却没有详细说明。但实际上iview是支持个性化的一些定制的
- 举个列子
关于线上部署的一些心得
- 场景1：前端文件基于java项目内部作为静态文件；
也是现在运用场景最多的，此时你打包编译是要注意项目静态资源目录的指向还有自动获取baseURl ，否则会面临浏览器一堆的404
// 打包输出路径
outputDir: 'linkage/web',
//静态资源路径
publicPath: 'linkage/web'还有就是代码库存入的代码，需要存一份项目源码，还有编译后的代码，这样才能使用Jenkins持续化部署工具进行一键部署
- 场景2：独立前端静态服务；
使用node+koa+p2m，或者nginx代理，将前端静态文件暴露，独立启动，后台作为一个Api提供服务，前后端独立启动互不影响，此时你的代码库内就只需要存一份项目源码，npm install,npm run build使用Jenkins在服务器安装编译以及启动
做个总结
1.项目开发结束后，目前我总结的坑都是能卡住的，一些小坑我就不多做赘述了，总的来说，vue全家桶 + iview开发项目是完全没有问题的，无论是开发速度，交互，还是稳定性 都完胜我们现在使用的传统jquery + iframe
2.那vue对于我们的项目产品线一定好一定适合吗，那倒也未必。vue全家桶编译后的项目源码，是不具备调试的能力的，这就给我们远程修改项目或者排查问题带来一定的困扰，尤其作为周界产品，需要对接多种视屏平台，大多数还没有脱离active X，只能在IE或者低版本浏览器进行使用，我们需要做大量的ie兼容工作。
