vue 技术第二弹

shenlan
shenlan 2月1日

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 过渡模式

动画过渡参考: [进入 / 离开 & 列表过渡 ](https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F)

这里有个动画过渡问题就是 如果我把 <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);

本文链接:https://blog.inmind.ltd/index.php/archives/73/
This blog is under a CC BY-NC-SA 4.0 Unported License