vue 技术第二弹

在这之前

第一弹指路：讲讲我学习 Vue.js 遇到的那些坑

一直在维护基于 vue 框架的项目的后果就是，遇到更多问题，然后解决更多问题。

似乎以后如果不出意外的话这个系列会一直更新下去。

还有就是，有些东西可能不是vue相关的，可能是es6，或者别的，这都是我在用vue做实际工程的附加产物，所以就不新开一文写了。

CDN优化

对于服务器带宽比较低的项目来说能从外部加载的都从外部加载会大大的提高载入速度。
本方法基于 vue-cli

1. 引入CDN

编辑 /public/index.html， header里加入 Vue 或其他组件的 CDN 标签

另外吹一波 jsdelivr，这个CDN相当牛x

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"></script>  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">

2. webpack配置

编辑 /vue.config.js (如果没有就创建一个)

module.exports = {  
  configureWebpack: {  
    externals: {  
      "vue": "Vue",  
      "vue-router": "VueRouter",  
      "vuex": "Vuex",  
      }  
  }
}

再次 build 就可以见到编译后的文件明显小了很多

一些比较小的项目是可以得到A评分的

benchmark： GTmetrix

项目title （网页title）

参考： cli: pages

在 /public/index.html 你可以看到 <title><%= htmlWebpackPlugin.options.title %></title>

title标签取得是一个值当然你可以直接修改它以达到效果，不过还是有比较正统的方法来修改的.

编辑 /vue.config.js

module.exports = {  
  pages:{  
    index:{  
      entry: "src/main.js",  
      title: "Inmind. have a nice day."  
      }  
  }  
}

transition 过渡模式

动画过渡参考: 进入/离开 & 列表过渡

这里有个动画过渡问题就是如果我把 <transition> 套在<router-view/> 上面，router切换的时候一个动画结束一个动画开始，然后两个会同时出现在一个页面上，并且排版还乱了，这是因为过渡模式不对。

只需要配置正确的mode就可以了

<div class="slide">  
     <transition name="slide-fade" mode="out-in">  
         <router-view/> 
     </transition>
 </div>

向子组件传递图片

1. 子view

html

<div class="image">  
 <img :src="img">  
</div>

script

export default {  
  name: "Friend.vue",  
  props:{  
   img: Image
  }  
}

2. 父view

html

<div class="row">  
 <Friend v-for="friend in friends"  
  :img="friend.img"  
  :key="friend.title"  
  ></Friend>  
</div>

script

import imgFor from '../assets/img/avatar/1.png'

export default {  
  name: "Friends",  
  components: {Friend},  
  data(){  
    return {  
      friends:[  
        {  
          title:"f;o;r",  
          img: imgFor
          }
      ]  
    }  
  }  
  
}

router-link

有个超好用的属性叫 active-class, 后面直接带上激活的class即可，这一个属性就干掉了 jQuery 几十行代码太强了。

<ul>  
     <li v-for="menu in menus" :key="menu.title">  
         <router-link :to="menu.route" active-class="active">  
             <i :class="['fa',menu.icon]"></i> <em>{{ menu.title }}</em>  
         </router-link> 
     </li>
 </ul>

创建 POST 请求

这里适用于打开一个新页面并且浏览器地址栏不要显示请求参数的需求。
忘记了从哪抄过来的了如果您是原作者请发送邮件至我邮箱里我会更正原作者。

postRequest(URL, PARAMS) {  
   let temp_form = document.createElement("form");  
   temp_form.action = URL;  
   temp_form.target = "_blank";  
   temp_form.method = "post";  
   temp_form.style.display = "none";  
   for (let x in PARAMS) {  
      let opt = document.createElement("textarea");  
      opt.name = x;  
      opt.value = PARAMS[x];  
      temp_form.appendChild(opt);  
   }  
   document.body.appendChild(temp_form);  
   temp_form.submit();  
}

合并数组

mergeList() {  
   return Array.prototype.concat.apply([], arguments);  
}

调用方式

let list = this.mergeList(a, b);

Wayne's blog