项目中所用素材都是收集自网上，仅个人学习，若侵请联系我立删

1.实现全屏动画效果

很简单的实现思路，一个gif动画，设置全屏显示，并设置主体内容不显示，通过v-if加定时器在2s后不显示gif，并显示主体内容。

<template>
<div>
	<div class="animation" v-if="showAnimation">
     	 <img src="../assets/an.gif" alt="biubiubiu" srcset="">
    <el-container class="home-container" v-if="!showAnimation">
    ......
    </el-container>
	</div>
</div>
</template>

data(){
  return (
    showAnimation:true
	}
}
mounted () {
    setTimeout(() => {
      this.showAnimation = false
    }, 2000)
  }
}

2.鼠标点击产生爱心

网上找的函数，新建一个love.js，导出love函数

export function love () {
  (function (window, document) {
    var hearts = []
    window.requestAnimationFrame = (function () {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function (callback) {
          setTimeout(callback, 1000 / 60)
        }
    })()
    init()
    function init () {
      css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}")
      attachEvent()
      gameloop()
    }
    function gameloop () {
      for (var i = 0; i < hearts.length; i++) {
        if (hearts[i].alpha <= 0) {
          document.body.removeChild(hearts[i].el)
          hearts.splice(i, 1)
          continue
        }
        hearts[i].y--
        hearts[i].scale += 0.004
        hearts[i].alpha -= 0.013
        hearts[i].el.style.cssText = 'left:' + hearts[i].x + 'px;top:' + hearts[i].y + 'px;opacity:' + hearts[i].alpha + ';transform:scale(' + hearts[i].scale + ',' + hearts[i].scale + ') rotate(45deg);background:' + hearts[i].color
      }
      requestAnimationFrame(gameloop)
    }
    function attachEvent () {
      var old = typeof window.onclick === 'function' && window.onclick
      window.onclick = function (event) {
        old && old()
        createHeart(event)
      }
    }
    function createHeart (event) {
      var d = document.createElement('div')
      d.className = 'heart'
      hearts.push({
        el: d,
        x: event.clientX - 5,
        y: event.clientY - 5,
        scale: 1,
        alpha: 1,
        color: randomColor()
      })
      document.body.appendChild(d)
    }
    function css (css) {
      var style = document.createElement('style')
      style.type = 'text/css'
      try {
        style.appendChild(document.createTextNode(css))
      } catch (ex) {
        style.styleSheet.cssText = css
      }
      document.getElementsByTagName('head')[0].appendChild(style)
    }
    function randomColor () {
      return 'rgb(' + (~~(Math.random() * 255)) + ',' + (~~(Math.random() * 255)) + ',' + (~~(Math.random() * 255)) + ')'
    }
  })(window, document)
}

在主页面导入

<script>
import { love } from '../../public/love'
export default {
	......
	mounted () {
    love()
  }
}
</script>

3.全屏非全屏切换

yarn add screenfull或者npm install -s screenfull

<script>
// 导入全屏插件
import screenfull from 'screenfull'
export default {
    // 点击全屏，再次点击则恢复
	clickscreenfull () {
      screenfull.toggle()
    },
}
</script>

screenfull.toggle()调用一次就是全屏，再调用一次就退出全屏，所以直接绑定一个点击按钮啥的就行，so easy

4.请求时上方显示进度条

yarn add nprogress或者npm install -s nprogress

在vue项目main.js中

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
axios.interceptors.request.use(config => {
  // 开始进度条
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})
axios.interceptors.response.use(config => {
  // 结束进度条
  NProgress.done()
  return config
})

本项目使用的axios，所以请求开始NProgress.start()请求结束NProgress.done()，实现进度条的作用

5.echarts 自适应

yarn add echarts 或者 npm install -s echarts

<template>
  <el-card>
    <div id="main" style="width: 90%; height: 400px">
    </div>
  </el-card>
</template>

data () {
  return {
 	 option：{
 		......
 	 }
  }
}
mounted () {
    const echarts = require('echarts')
    const myChart = echarts.init(document.getElementById('main'))
    // 使用指定的配置项和数据显示图表。
    myChart.setOption(this.option)
    //窗口变化时，重新绘制,实现自适应大小
    window.onresize = function () {
      myChart.resize()
    }
  }

6.好看的配色

好看的灰色

 background-color: #F5F5F9;

好看的渐变红

background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);

好看的渐变蓝

background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);

7.总结

所以就是调轮子，用轮子，加上vue写起来真的顺手，nice