iView-admin2.0 新手教程（一）

1、简介

iView-admin是iView生态中的成员之一，是一套采用前后端分离开发模式，基于Vue的后台管理系统前端解决方案。iView-admin2.0脱离1.x版本进行重构，换用Webpack4.0 + Vue-cli3.0作为基本开发环境。内置了开发后台管理系统常用的逻辑功能，和开箱即用的业务组件，旨在让开发者能够以最小的成本开发后台管理系统，降低开发量。

2、目录结构

php 复制代码

.
├── 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分支最新代码：

php 复制代码

git clone https://github.com/iview/iview-admin.git -b 2.0

然后进入项目根目录

php 复制代码

cd iview-admin

安装依赖并运行项目

php 复制代码

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除了原生参数外可配置的参数:

php 复制代码

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 跳转到其他网页，在新窗口打开

你可以在菜单栏中显示一个任意连接，并且点击该菜单项会打开新窗口展示链接到的页面。在路由中需要如下定义：

php 复制代码

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 []的数组中，如登录页的定义如下：

php 复制代码

export default [
  {
    path: '/login', // 必须项
    name: 'login', // 必须项，后面缓存页面需要用到，且这个name是唯一的
    meta: {
      title: 'Login - 登录',
      hideInMenu: true // 是否在左侧菜单中隐藏，默认为false
    },
    component: () => import('@/view/login/login.vue')
  },
  /* 其他路由 */
]

5.4 在Main组件展示区域中展示的页面

页面作为多Tab页展示，在Main组件的视图区域显示，则需要在用到子路由，定义如下：

php 复制代码

export default [
  {
    path: '/multilevel',
    name: 'multilevel', // 一级目录
    meta: {
      icon: 'arrow-graph-up-right',
      title: '多级菜单'
    },
    component: Main, // 一级目录必须使用Main组件作为component
    children: [
      {
        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

该指令作用于组件上，用于实现任意组件的可拖拽效果

php 复制代码

<Button v-draggable="buttonOptions" id="button"></Button>

buttonOptions: {
  trigger: '#button', // 设置能触发拖动的元素的CSS选择器
  body: '#button' // 设置需要移动的元素的CSS选择器
}

注：尽量看官方文档