首先，我们应进行iView的安装，可利用npm包管理工具安装
npm install iview --save
安装成功后，我们要将对应的框架引入到项目中，这个时候，官网上有两种方法可以实现，第一种是直接在main.js中做如下配置：
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.config.productionTip = false
Vue.use(iView);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
这种方式是一种全局引入的方式，引入后就在具体的页面或者组件内不需要再进行其他的引入，但缺点是无论是否需要该组件，都将全部引入，对于性能优化不是很好，这里推荐第二种用法，按需引入，这里需要借助插件babel-plugin-import实现按需加载组件，减小文件体积。首先需要安装，并在.babelrc中配置：
npm install babel-plugin-import --save-dev
// .babelrc
{
"plugins": [["import", {
"libraryName": "iview",
"libraryDirectory": "src/components"
}]]
}
然后这样按需引入组件，就可以减小体积了，这里需要注意的是，因为我们修改了.babelrc文件，这将导致我们第一种引入方法失效了，如果再使用那种方式引入，会导致代码报错；
<template>
<div class="content">
<div class="title">患者接诊</div>
<div>
<Button type="primary" shape="circle" class="btn-time">临时保存</Button>
<Button type="primary" shape="circle" class="btn-cancel">取消就诊</Button>
<Button type="primary" shape="circle" class="btn-done">完成就诊</Button>
</div>
</div>
</template>
<script>
import {Button} from 'iview'
export default {
name: "fHeader",
components:{
Button
}
}
</script>
运行结果如下图
步骤五、vue-router的使用
如果没有阅读过官方文档，建议大伙先阅读，官网上的教程已经足够详细，受益匪浅；学习的过程中，需要了解路由配置的基本步骤，命名规则，嵌套路由，路由传参，具名视图以及路由守卫，滚动行为和懒加载，这里我们就不一一详细介绍了，官网已有，我们这里是做构建是的配置和懒加载处理：
首先，我们应该是安装vue-router,这个在我们生成项目的时候，已经将该依赖加载进来了，下一步要做的是在router文件下index.js进行配置：