公共组件封装--引入动画--引入字体图标
一、公共组件封装
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.在需要的页面添加类名即可