iView admin是基于Vue.js，搭配使用iView UI组件库形成的一套后台集成解决方案，由TalkingData前端可视化团队部分成员开发维护.
在线访问体验(密码随意填,但要记住!)
github地址
官方文档
第一步 下载 iview-admin
首先你需要去 iview-admin 下载最新的包,随便你用任何方式 download.
下载完后的文件夹内容
image.png
第二步 文件整理
把 iview-admin 里面的 src 目录下的东西，全部复制粘贴到 laravel项目 里面的 resources\assets\js 目录下（把laravel 原来js目录下的东西全部删掉或者只留下bootstrap.js）然后把laravel 里面 resources\assets\js 目录下的 main.js 改名为 app.js
image.png
第三步 修改 laravel-mix 和 webpack 相关文件
把根目录下的 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"
},
"dependencies": {
"axios": "^0.18.0",
"clipboard": "^2.0.0",
"codemirror": "^5.38.0",
"countup": "^1.8.2",
"cropperjs": "^1.2.2",
"dayjs": "^1.7.7",
"echarts": "^4.0.4",
"html2canvas": "^1.0.0-alpha.12",
"iview": "^3.1.3",
"iview-area": "^1.5.17",
"js-cookie": "^2.2.0",
"simplemde": "^1.11.2",
"sortablejs": "^1.7.0",
"tree-table-vue": "^1.0.5",
"vue": "^2.5.10",
"vue-i18n": "^7.8.0",
"vue-router": "^3.0.1",
"vuedraggable": "^2.16.0",
"vuex": "^3.0.1",
"wangeditor": "^3.1.1",
"xlsx": "^0.13.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.1",
"@vue/cli-plugin-eslint": "^3.0.1",
"@vue/cli-plugin-unit-mocha": "^3.0.1",
"@vue/cli-service": "^3.0.1",
"@vue/eslint-config-standard": "^3.0.0-beta.10",
"@vue/test-utils": "^1.0.0-beta.10",
"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"
}
}
把根目录下的 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/');
把resources\assets\js\router\routers.js 文件修改为
import Main from '@/components/main'
import parentView from '@/components/parent-view'
/**
* iview-admin中meta除了原生参数外可配置的参数:
* meta: {
* title: { String|Number|Function }
* 显示在侧边栏、面包屑和标签栏的文字
* 使用'{{ 多语言字段 }}'形式结合多语言使用，例子看多语言的路由配置;
* 可以传入一个回调函数，参数是当前路由对象，例子看动态路由和带参路由
* hideInBread: (false) 设为true后此级路由将不会出现在面包屑中，示例看QQ群路由配置
* hideInMenu: (false) 设为true后在左侧菜单不会显示该页面选项
* notCache: (false) 设为true后页面在切换标签后不会缓存，如果需要缓存，无需设置这个字段，而且需要设置页面组件name属性和路由配置的name一致
* access: (null) 可访问该页面的权限数组，当前路由设置的权限会影响子路由
* icon: (-) 该页面在左侧菜单、面包屑和标签导航处显示的图标，如果是自定义图标，需要在图标名称前加下划线'_'
* beforeCloseName: (-) 设置该字段，则在关闭当前tab页时会去'@/router/before-close.js'里寻找该字段名对应的方法，作为关闭前的钩子函数
* }
*/
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,
icon: 'md-home'
},
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,
meta: {
hideInBread: true
},
children: [
{
path: 'join_page',
name: 'join_page',
meta: {
icon: '_qq',
title: 'QQ群'
},
component: resolve => { require(['@/view/join-page.vue'], resolve); }
}
]
},
{
path: '/message',
name: 'message',
component: Main,
meta: {
hideInBread: true,
hideInMenu: true
},
children: [
{
path: 'message_page',
name: 'message_page',
meta: {
icon: 'md-notifications',
title: '消息中心'
},
component: resolve => { require(['@/view/single-page/message/index.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: 'drag_list_page',
name: 'drag_list_page',
meta: {
icon: 'ios-infinite',
title: '拖拽列表'
},
component: resolve => { require(['@/view/components/drag-list/drag-list.vue'], resolve); }
},
{
path: 'tree_table_page',
name: 'tree_table_page',
meta: {
icon: 'md-git-branch',
title: '树状表格'
},
component: resolve => { require(['@/view/components/tree-table/index.vue'], resolve); }
},
{
path: 'cropper_page',
name: 'cropper_page',
meta: {
icon: 'md-crop',
title: '图片裁剪'
},
component: resolve => { require(['@/view/components/cropper/cropper.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: '/excel',
name: 'excel',
meta: {
icon: 'ios-stats',
title: 'EXCEL导入导出'
},
component: Main,
children: [
{
path: 'upload-excel',
name: 'upload-excel',
meta: {
icon: 'md-add',
title: '导入EXCEL'
},
component: resolve => { require(['@/view/excel/upload-excel.vue'], resolve); }
},
{
path: 'export-excel',
name: 'export-excel',
meta: {
icon: 'md-download',
title: '导出EXCEL'
},
component: resolve => { require(['@/view/excel/export-excel.vue'], resolve); }
}
]
},
{
path: '/tools_methods',
name: 'tools_methods',
meta: {
hideInBread: true
},
component: Main,
children: [
{
path: 'tools_methods_page',
name: 'tools_methods_page',
meta: {
icon: 'ios-hammer',
title: '工具方法',
beforeCloseName: 'before_close_normal'
},
component: resolve => { require(['@/view/tools-methods/tools-methods.vue'], resolve); }
}
]
},
{
path: '/i18n',
name: 'i18n',
meta: {
hideInBread: true
},
component: Main,
children: [
{
path: 'i18n_page',
name: 'i18n_page',
meta: {
icon: 'md-planet',
title: 'i18n - {{ i18n_page }}'
},
component: resolve => { require(['@/view/i18n/i18n-page.vue'], resolve); }
}
]
},
{
path: '/error_store',
name: 'error_store',
meta: {
hideInBread: true
},
component: Main,
children: [
{
path: 'error_store_page',
name: 'error_store_page',
meta: {
icon: 'ios-bug',
title: '错误收集'
},
component: resolve => { require(['@/view/error-store/error-store.vue'], resolve); }
}
]
},
{
path: '/error_logger',
name: 'error_logger',
meta: {
hideInBread: true,
hideInMenu: true
},
component: Main,
children: [
{
path: 'error_logger_page',
name: 'error_logger_page',
meta: {
icon: 'ios-bug',
title: '错误收集'
},
component: resolve => { require(['@/view/single-page/error-logger.vue'], resolve); }
}
]
},
{
path: '/directive',
name: 'directive',
meta: {
hideInBread: 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: 'md-funnel',
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: 'md-funnel',
showAlways: true,
title: '二级-2'
},
component: parentView,
children: [
{
path: 'level_2_2_1',
name: 'level_2_2_1',
meta: {
icon: 'md-funnel',
title: '三级'
},
component: resolve => { require(['@/view/multilevel/level-2-2/level-3-1.vue'], resolve); }
}
]
},
{
path: 'level_2_3',
name: 'level_2_3',
meta: {
icon: 'md-funnel',
title: '二级-3'
},
component: resolve => { require(['@/view/multilevel/level-2-3.vue'], resolve); }
}
]
},
{
path: '/argu',
name: 'argu',
meta: {
hideInMenu: true
},
component: Main,
children: [
{
path: 'params/:id',
name: 'params',
meta: {
icon: 'md-flower',
title: route => `{{ params }}-${route.params.id}`,
notCache: true,
beforeCloseName: 'before_close_normal'
},
component: resolve => { require(['@/view/argu-page/params.vue'], resolve); }
},
{
path: 'query',
name: 'query',
meta: {
icon: 'md-flower',
title: route => `{{ query }}-${route.query.id}`,
notCache: true
},
component: resolve => { require(['@/view/argu-page/query.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: {
hideInMenu: 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); }
}
]
把根目录下的 resources\assets\js\app.js 文件修改为
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import iView from 'iview'
import i18n from '@/locale'
import config from '@/config'
import importDirective from '@/directive'
import installPlugin from '@/plugin'
import './index.less'
import '@/assets/icons/iconfont.css'
import TreeTable from 'tree-table-vue'
// 实际打包时应该不引入mock
/* eslint-disable */
if (process.env.NODE_ENV !== 'production') require('@/mock')
Vue.use(iView, {
i18n: (key, value) => i18n.t(key, value)
})
Vue.use(TreeTable)
/**
* @description 注册admin内置插件
*/
installPlugin(Vue)
/**
* @description 生产环境关掉提示
*/
Vue.config.productionTip = false
/**
* @description 全局注册应用配置
*/
Vue.prototype.$config = config
/**
* 注册指令
*/
importDirective(Vue)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
i18n,
store,
render: h => h(App)
})
还有如果你把resources\assets\js\中的原来的bootstrap.js文件删了别忘了把resources\assets\sass\app.scss中 bootsrap 注释掉
// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
@import "variables";
// Bootstrap
//@import "~bootstrap-sass/assets/stylesheets/bootstrap";
第四步 构建展示
根目录下执行npm(cnpm) install然后执行npm(cnpm) run dev 或者 npm(cnpm) run watch应该不会再看到报错了.
在laravel 根目录下 routes/web.php 里面加个路由：
Route::get('/', function () {
return view('admin');
});
再到 laravel 根目录下 resources\views 目录下，添加文件 admin.blade.php ：
Laravel-iview-admin
然后在laravel 根目录下 执行 php artisan serve
然后打开浏览器 输入 http://127.0.0.1 就能看到登录界面了