VUE实战还有个人iview填坑之路

周界新起的联动系统，采用了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兼容工做。