Vue使用ivew组件实现响应式布局

1.vue-cli3.0中使用iview

链接: Vue-cli3.0中使用iview.
1.在控制台启动vue ui

2.在vue ui中搜索并安装iview
或者直接在控制台输入

cnpm install iview

3.安装好后重启项目
4.在main.js中引入

import iview from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iview)

2.布局组件的使用

1.在views文件夹中创建layout.vue文件

<template>
  <div>
    
  </div>
</template>
<script>
export default {
   
  
}
</script>
<style lang="less">
  
</style>

2.在rooter.js中引入，这里我们就把首页作为路由

import Layout from '@/views/layout.vue'

{
   
    path: '/',
    alias: '/homee',
    name: 'Home',
    component: Layout
  }

3.在app.vue页面配置，并为icon设置动画

<template>
  <div id="app">
    <router-view key="default" />
  </div>
</template>

<script>
export default {
   
  name: 'app',
  components: {
   
  }
}
</script>

<style >
 #app {
   
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   height: 100%;
}
html,body{
   
  height: 100%;
}
body{
   
  margin: 0;
}
</style>

4.在layout.vue中进行配置，并实现icon动效

<template