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

一、公共组件封装

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.在需要的页面添加类名即可