公共组件封装--引入动画--引入字体图标

一、公共组件封装

1. 新建一common文件夹,创建公共组件

<template>
  <div>
    <button @click="$router.go(-1)">返回</button>
  </div>
</template>

2. 在common中新建index.js(导出所有组件)

import vBack from './back'
export default {
  vBack,
}

3. 在main.js中循环遍历导入公共组件,并注册组件

import Common from './common/index'

for(let i in Common){
  Vue.component(i,Common[i])
}

 

二、引入动画

1. npm i animate.css --save

2. 在main.js中引入: import 'animate.css'

3. 给需要添加动画的元素用transition包裹起来,并添加类名

<transition

enter-active-class='animate_animated animate_fadeInLeft' 

leave-active-class='animate_animated animate_fadeOutLeft' >

  <router-view></router-view>

</transition>

 

三、字体图标的引入

1.下载字体图标文件
2.把iconfont中的iconfont.css还有.eot.ttf等等字体图标引入 ,需要修改引入eot的文件路径
3.在main.js中导入iconfont.css
4.在需要的页面添加类名即可

posted @ 2020-11-08 11:07  ss_shen  阅读(149)  评论(0)    收藏  举报