项目封版后的总结

一个月的项目周期已进行四分之三，项目兼容浏览器ie9、10、11，大大小小遇到的问题好多，现在来细数一下，问题不分先后，不分大小，想到哪儿写哪

一.内网开发，无法使用npm下载各种插件依赖包

做为一个当代最时尚的前端开发工程师竟然不能利用万能的互联网来做开发，呵呵···，我受到了来自十万八千里之外同行们的嘲笑。不过这并不能影响老板的意愿：公司的资料都是机密，万一泄露了岂不是少挣了一个亿。好吧，好在旁边有台电脑逃过了内网的封杀，在与强大的势力拼搏中保住了可以插入并读取USB的功能。

我们先在自己电脑上使用vue-cli脚手架搭好一个空项目，npm install 下载可能用到的插件，包括jquery,echarts,element-ui等，然后再把整个项目考到公司的电脑上，在src文件夹下进行开发。苦啊！

二.具体的问题

1.导航栏vheader

<router-link @click.native="titlechange($event)"></router-link>

注意：给组件绑定原生事件就需要.native修饰v-on，否则无法注册成功

2.ie 显示空白

下载balbel并在main.js中引入

import 'bable-polyfill'

3.echarts打包后体积大 700k

按需引入line/折线图 pie/圆饼图 bar/柱状图

require('echarts/lib/chart/line')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

4.自定义element-ui弹框样式

open.js

import Vue from 'vue'
Vue.prototype.open = function(content){
    this.$confirm(content,{
      confirmButtonText:'我知道了' ,
        type:'warning' ,
       center:true
    }).then(()=>{})
}

样式修改app.vue

<style>
    .el-message-box{width:324px !important;height:220px;}
</style>

5.vue Bus传值

bus.js

import Vue from 'vue'
export default new Vue

components

import Bus from '../assets/js/bus'

使用

beforeDestory(){
    Bus.$emit("tomsg",{
    "a":123,
    "b":"shuju"      
    })
}

获取

beforeCreate(){
  Bus.$on("tomsg",(res)=>{console.log(res)})  
}

注意：第一次传值可能拿不到，原因：$on还没有创建时$emit已经发出，所以接受不到

解决方法：1.延时器 2 上面

6.keep-alive 动态保存页面

项目中有些页面需要被保存的，有些页面需要部分刷新

app.vue

<template>
    <div>
        <keep-alive>
              <router-view v-if = "$route.meta.keepAlive">
                    <!--需要被缓存的页面-->
              </router-view>

              <router-view v-if = "！$route.meta.keepAlive">
                    <!--不需要被缓存的页面-->
              </router-view>
        </keep-alive>        
    </div>
</template>

main.js

let router = new VueRouter({
   routes:[
      {
           path:'/home',
           name:'home',
           meta:{
              keepAlive:true,//需要被缓存的页面
              isBack:false
           }   
       }
   ]
})

components

boforeRouterEnter(to,from,next){
  if(from.name == 'heto'){//从需要被缓存的页面过来
   to.meta.isBack = true;
   }  else {
     to.meta.isBack = false;      
   }
   next();
},
activated(){//每次跳转都会执行的生命周期
    if(this.$route.meta.isBack == false){//需要刷新
      this.a = ""//置空
    }
    this.$route.meta.isBack = false
}

7.ie9模拟placeholder属性

ie9placeholder(){
  //判断是否是ie9
  if(navigator.userAgent.indexOf("MSIE 9.0")>0){
    $('#ipt').each(function(){
     var self = $(this);
     self.parent().append('<span class='placeholder' data-type="placeholder">请输入姓名</span>') 
     if(self.val() != ''){
      self.parent().find("span.placeholder").hide()
     }else{
      self.parent().find("span.placeholder").show()
     }
    }).on("focus",function(){
        self.parent().find("span.placeholder").hide()
    }).on("blur",function(){
       var self = $(this)
       if(self.val() != ''){
         self.parent().find("span.placeholder").hide()
       } else {
         self.parent().find("span.placeholder").show()
       }
    });
     $("span.placeholder").on('click',function(){
       $(this).hide()
      })
  }
}

项目封版后的总结

猜你喜欢