1、简介
iView-admin是iView生态中的成员之一，是一套采用前后端分离开发模式，基于Vue的后台管理系统前端解决方案。iView-admin2.0脱离1.x版本进行重构，换用Webpack4.0 + Vue-cli3.0作为基本开发环境。内置了开发后台管理系统常用的逻辑功能，和开箱即用的业务组件，旨在让开发者能够以最小的成本开发后台管理系统，降低开发量。
2、目录结构
.
├── config 开发相关配置
├── public 打包所需静态资源
└── src├── api AJAX请求└── assets 项目静态资源├── icons 自定义图标资源└── images 图片资源├── components 业务组件├── config 项目运行配置├── directive 自定义指令├── libs 封装工具函数├── locale 多语言文件├── mock mock模拟数据├── router 路由配置├── store Vuex配置├── view 页面文件└── tests 测试相关3、快速开始
从github获取最新的iView-admin代码，使用如下命令获取2.0分支最新代码：
git clone https://github.com/iview/iview-admin.git -b 2.0然后进入项目根目录
cd iview-admin安装依赖并运行项目
npm install
npm run dev然后只需要等待编译结束后其自动打开页面
4、全局配置
cookieExpires
token在Cookie中存储的天数，默认为1，即1天
useI18n
是否使用国际化，默认为false。
如果不使用，则需要在路由中给需要在菜单中展示的路由设置meta: {title: 'xxx'} 用来在菜单中显示文字
5、路由配置
在iView-admin中，路由配置承担着重要的作用，它影响着如下内容：
- 左侧菜单内容
- 是否缓存该页
- 该页面图标（显示在菜单、面包屑和Tab标签）
接下来来看如何配置路由
路由的配置是在 './src/router' 文件夹下，'./src/router/index.js'文件中定义路由拦截的逻辑，'./src/router/routers.js' 文件中定义页面路由信息。
5.1 路由可配项
iview-admin中meta除了原生参数外可配置的参数:
meta: {hideInMenu: (default: false) 设为true后在左侧菜单不会显示该页面选项showAlways: (default: false) 设为true后如果该路由只有一个子路由，在菜单中也会显示该父级菜单notCache: (default: false) 设为true后页面不会缓存access: (default: null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由icon: (default: -) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_'href: 'https://xxx' (default: null) 用于跳转到外部连接
}5.2 跳转到其他网页，在新窗口打开
你可以在菜单栏中显示一个任意连接，并且点击该菜单项会打开新窗口展示链接到的页面。在路由中需要如下定义：
export default [{path: '',name: 'lison16',meta: {href: 'https://github.com/lison16',icon: '_love',title: 'Lison的github首页'}}
]这样在菜单栏中点击Lison的github首页这一项就会打开一个新窗口，跳转到https://github.com/lison16
5.3 在独立页面展示的页面
如登录页、错误页这种独立的页面，无需使用Main组件，则直接定义在 routers.js 中export default []的数组中，如登录页的定义如下：
export default [{path: '/login', // 必须项name: 'login', // 必须项，后面缓存页面需要用到，且这个name是唯一的meta: {title: 'Login - 登录',hideInMenu: true // 是否在左侧菜单中隐藏，默认为false},component: () => import('@/view/login/login.vue')},/* 其他路由 */
]5.4 在Main组件展示区域中展示的页面
页面作为多Tab页展示，在Main组件的视图区域显示，则需要在用到子路由，定义如下：
export default [{path: '/multilevel',name: 'multilevel', // 一级目录meta: {icon: 'arrow-graph-up-right',title: '多级菜单'},component: Main, // 一级目录必须使用Main组件作为componentchildren: [{path: 'level_2_1',name: 'level_2_1', // 一级目录下的二级页面meta: {icon: 'arrow-graph-up-right',title: '二级-1'},component: () => import('@/view/multilevel/level-1.vue') // 这引入的是页面单文件},{path: 'level_2_2',name: 'level_2_2',meta: {access: ['super_admin'], // 权限控制<Array>，包含可访问该页面的用户权限icon: 'arrow-graph-up-right',title: '二级-2'},component: parentView, // 如果该路由不是页面，而是二级即更多级目录，需要用parentView组件children: [{path: 'level_2_2_1',name: 'level_2_2_1',meta: {icon: 'arrow-graph-up-right',title: '三级'},component: () => import('@/view/multilevel/level-2/level-2-1.vue')}]}]}
]5.5 路由拦截
在'./src/router/index.js'文件中，你可以配置路由跳转时的路由守卫。你可以设置文件中的LOGIN_PAGE_NAME常量，其默认值是login，这个就是路由列表中你的登录页面的name值，如果你的登录页面name值为login，则无需修改。
6、全局指令
draggable
该指令作用于组件上，用于实现任意组件的可拖拽效果
<Button v-draggable="buttonOptions" id="button"></Button>buttonOptions: {trigger: '#button', // 设置能触发拖动的元素的CSS选择器body: '#button' // 设置需要移动的元素的CSS选择器
}
注：尽量看官方文档