laravel 集成 iview-admin

第一步，准备工作

准备 iview-admin
把iview-admin下载下来，下面是iview-admin的地址（采用任何你所知道的方式下载）：

https://github.com/iview/iview-admin

下载完之后，解压，你将看到这样的目录：

准备laravel
laravel 怎么装，我也不知道，只能给出链接你们参考：laravel安装

第二步

文件整理
把 iview-admin 里面的 src 目录下的东西，全部复制粘贴到 laravel 里面 resources\assets\js 目录下（把laravel 原来js目录下的东西删掉）
结果如下：

再把原来 iview-admin 根目录下的 config 目录下的东西 复制到 laravel 里面 resources\assets\js\config 目录下
结果如下：

再把laravel 里面 resources\assets\js 目录下的 main.js 改名为 app.js

第三步

laravel 根目录下的 package.json 文件修改为：

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7",

        "clipboard": "^2.0.0",
        "codemirror": "^5.38.0",
        "countup": "^1.8.2",
        "cropperjs": "^1.2.2",
        "echarts": "^4.0.4",
        "html2canvas": "^1.0.0-alpha.12",
        "iview": "^3.0.0",
        "iview-area": "^1.5.17",
        "js-cookie": "^2.2.0",
        "simplemde": "^1.11.2",
        "sortablejs": "^1.7.0",
        "vue-i18n": "^7.8.0",
        "vue-router": "^3.0.1",
        "vuex": "^3.0.1",
        "wangeditor": "^3.1.1",
        "chai": "^4.1.2",
        "eslint-plugin-cypress": "^2.0.1",
        "less": "^2.7.3",
        "less-loader": "^4.0.5",
        "lint-staged": "^6.0.0",
        "mockjs": "^1.0.1-beta3",
        "vue-template-compiler": "^2.5.13"
    }
}

laravel 根目录下的 webpack.mix.js 文件修改为：

let mix = require('laravel-mix');

const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}
mix.webpackConfig({
    resolve: {
        alias:{
            '@':resolve('resources/assets/js'),
            '_c':resolve('resources/assets/js/components'),
            '_conf':resolve('resources/assets/js/config')
        }
    }
});
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

laravel 根目录下的 resources\assets\js\app.js 文件里面的

import env from '../config/env'
替换为：
import env from '@/config/env'

laravel 根目录下的 resources\assets\js\router\routers.js 文件修改为：

import Main from '@/view/main'
import parentView from '@/components/parent-view'

/**
 * iview-admin中meta除了原生参数外可配置的参数:
 * meta: {
 *  hideInMenu: (false) 设为true后在左侧菜单不会显示该页面选项
 *  notCache: (false) 设为true后页面不会缓存
 *  access: (null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由
 *  icon: (-) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_'
 * }
 */

export default [
  {
    path: '/login',
    name: 'login',
    meta: {
      title: 'Login - 登录',
      hideInMenu: true
    },
    component: resolve => { require(['@/view/login/login.vue'], resolve); }
  },
  {
    path: '/',
    name: 'home',
    redirect: '/home',
    component: Main,
    meta: {
      hideInMenu: true,
      notCache: true
    },
    children: [
      {
        path: '/home',
        name: 'home',
        meta: {
          hideInMenu: true,
          title: '首页',
          notCache: true
        },
        component: resolve => { require(['@/view/single-page/home'], resolve); }
      }
    ]
  },
  {
    path: '',
    name: 'doc',
    meta: {
      title: '文档',
      href: 'https://lison16.github.io/iview-admin-doc/#/',
      icon: 'ios-book'
    }
  },
  {
    path: '/join',
    name: 'join',
    component: Main,
    children: [
      {
        path: 'join_page',
        name: 'join_page',
        meta: {
          icon: '_qq',
          title: 'QQ群'
        },
        component: resolve => { require(['@/view/join-page.vue'], resolve); }
      }
    ]
  },
  {
    path: '/components',
    name: 'components',
    meta: {
      icon: 'logo-buffer',
      title: '组件'
    },
    component: Main,
    children: [
      {
        path: 'count_to_page',
        name: 'count_to_page',
        meta: {
          icon: 'md-trending-up',
          title: '数字渐变'
        },
        component: resolve => { require(['@/view/components/count-to/count-to.vue'], resolve); }
      },
      {
        path: 'tables_page',
        name: 'tables_page',
        meta: {
          icon: 'md-grid',
          title: '多功能表格'
        },
        component: resolve => { require(['@/view/components/tables/tables.vue'], resolve); }
      },
      {
        path: 'split_pane_page',
        name: 'split_pane_page',
        meta: {
          icon: 'md-pause',
          title: '分割窗口'
        },
        component: resolve => { require(['@/view/components/split-pane/split-pane.vue'], resolve); }
      },
      {
        path: 'markdown_page',
        name: 'markdown_page',
        meta: {
          icon: 'logo-markdown',
          title: 'Markdown编辑器'
        },
        component: resolve => { require(['@/view/components/markdown/markdown.vue'], resolve); }
      },
      {
        path: 'editor_page',
        name: 'editor_page',
        meta: {
          icon: 'ios-create',
          title: '富文本编辑器'
        },
        component: resolve => { require(['@/view/components/editor/editor.vue'], resolve); }
      },
      {
        path: 'icons_page',
        name: 'icons_page',
        meta: {
          icon: '_bear',
          title: '自定义图标'
        },
        component: resolve => { require(['@/view/components/icons/icons.vue'], resolve); }
      }
    ]
  },
  {
    path: '/update',
    name: 'update',
    meta: {
      icon: 'md-cloud-upload',
      title: '数据上传'
    },
    component: Main,
    children: [
      {
        path: 'update_table_page',
        name: 'update_table_page',
        meta: {
          icon: 'ios-document',
          title: '上传Csv'
        },
        component: resolve => { require(['@/view/update/update-table.vue'], resolve); }
      },
      {
        path: 'update_paste_page',
        name: 'update_paste_page',
        meta: {
          icon: 'md-clipboard',
          title: '粘贴表格数据'
        },
        component: resolve => { require(['@/view/update/update-paste.vue'], resolve); }
      }
    ]
  },
  {
    path: '/directive',
    name: 'directive',
    meta: {
      hide: true
    },
    component: Main,
    children: [
      {
        path: 'directive_page',
        name: 'directive_page',
        meta: {
          icon: 'ios-navigate',
          title: '指令'
        },
        component: resolve => { require(['@/view/directive/directive.vue'], resolve); }
      }
    ]
  },
  {
    path: '/multilevel',
    name: 'multilevel',
    meta: {
      icon: 'md-menu',
      title: '多级菜单'
    },
    component: Main,
    children: [
      {
        path: 'level_2_1',
        name: 'level_2_1',
        meta: {
          icon: 'arrow-graph-up-right',
          title: '二级-1'
        },
        component: resolve => { require(['@/view/multilevel/level-2-1.vue'], resolve); }
      },
      {
        path: 'level_2_2',
        name: 'level_2_2',
        meta: {
          access: ['super_admin'],
          icon: 'arrow-graph-up-right',
          showAlways: true,
          title: '二级-2'
        },
        component: parentView,
        children: [
          {
            path: 'level_2_2_1',
            name: 'level_2_2_1',
            meta: {
              icon: 'arrow-graph-up-right',
              title: '三级'
            },
            component: resolve => { require(['@/view/multilevel/level-2-2/level-3-1.vue'], resolve); }
          }
        ]
      },
      {
        path: 'level_2_3',
        name: 'level_2_3',
        meta: {
          icon: 'arrow-graph-up-right',
          title: '二级-3'
        },
        component: resolve => { require(['@/view/multileveMlevel-2-3.vue'], resolve); }
      },
    ]
  },
  {
    path: '/401',
    name: 'error_401',
    meta: {
      hideInMenu: true
    },
    component: resolve => { require(['@/view/error-page/401.vue'], resolve); }
  },
  {
    path: '/500',
    name: 'error_
500',
    meta: {
      hideIn，enu: true
    },
    component: resolve => { require(['@/view/error-page/500.vue'], resolve); }
  },
  {
    path: '*',
    name: 'error_404',
    meta: {
      hideInMenu: true
    },
    component: resolve => { require(['@/view/error-page/404.vue'], resolve); }
  }
]

后面就是构建的问题了，怎么构建我就不说了吧，npm install 或者 cnpm install
然后 npm run dev 就完了

在laravel 根目录下 routes/web.php 里面加个路由：

Route::get('/{sub?}', function () {
    return view('main');
})->where('sub','.*');

再到 laravel 根目录下 resources\views 目录下，添加文件 main.blade.php ：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel-iview-admin</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="{{asset('js/app.js')}}"></script>
    </body>
</html>

然后在laravel 根目录下 打开cmd 执行 php artisan serve
然后打开浏览器 输入 http://127.0.0.1 就能看到登录界面了