php如何直接使用iview,Laravel 使用 iview-admin

最新推荐文章于 2021-03-17 14:58:01 发布

江涛校泵

最新推荐文章于 2021-03-17 14:58:01 发布

阅读量338

点赞数

文章标签： php如何直接使用iview

iView admin是基于Vue.js，搭配使用iView UI组件库形成的一套后台集成解决方案，由TalkingData前端可视化团队部分成员开发维护.

在线访问体验(密码随意填,但要记住!)

github地址

官方文档

第一步下载 iview-admin

首先你需要去 iview-admin 下载最新的包,随便你用任何方式 download.

下载完后的文件夹内容

3ee089272a7f

image.png

第二步文件整理

把 iview-admin 里面的 src 目录下的东西，全部复制粘贴到 laravel项目里面的 resources\assets\js 目录下(把laravel 原来js目录下的东西全部删掉或者只留下bootstrap.js)然后把laravel 里面 resources\assets\js 目录下的 main.js 改名为 app.js

3ee089272a7f

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',

meta: {

title: 'Login - 登录',

hideInMenu: true

component: resolve => { require(['@/view/login/login.vue'], resolve); }

{

path: '/',

redirect: '/home',

component: Main,

meta: {

hideInMenu: true,

notCache: true

children: [

{

path: '/home',

meta: {

hideInMenu: true,

title: '首页',

notCache: true,

icon: 'md-home'

component: resolve => { require(['@/view/single-page/home'], resolve); }

}

]

{

path: '',

meta: {

title: '文档',

href: 'https://lison16.github.io/iview-admin-doc/#/',

icon: 'ios-book'

}

{

path: '/join',

component: Main,

meta: {

hideInBread: true

children: [

{

path: 'join_page',

meta: {

icon: '_qq',

title: 'QQ群'

component: resolve => { require(['@/view/join-page.vue'], resolve); }

}

]

{

path: '/message',

component: Main,

meta: {

hideInBread: true,

hideInMenu: true

children: [

{

path: 'message_page',

meta: {

icon: 'md-notifications',

title: '消息中心'

component: resolve => { require(['@/view/single-page/message/index.vue'], resolve); }

}

]

{

path: '/components',

meta: {

icon: 'logo-buffer',

title: '组件'

component: Main,

children: [

{

path: 'count_to_page',

meta: {

icon: 'md-trending-up',

title: '数字渐变'

component: resolve => { require(['@/view/components/count-to/count-to.vue'], resolve); }

{

path: 'drag_list_page',

meta: {

icon: 'ios-infinite',

title: '拖拽列表'

component: resolve => { require(['@/view/components/drag-list/drag-list.vue'], resolve); }

{

path: 'tree_table_page',

meta: {

icon: 'md-git-branch',

title: '树状表格'

component: resolve => { require(['@/view/components/tree-table/index.vue'], resolve); }

{

path: 'cropper_page',

meta: {

icon: 'md-crop',

title: '图片裁剪'

component: resolve => { require(['@/view/components/cropper/cropper.vue'], resolve); }

{

path: 'tables_page',

meta: {

icon: 'md-grid',

title: '多功能表格'

component: resolve => { require(['@/view/components/tables/tables.vue'], resolve); }

{

path: 'split_pane_page',

meta: {

icon: 'md-pause',

title: '分割窗口'

component: resolve => { require(['@/view/components/split-pane/split-pane.vue'], resolve); }

{

path: 'markdown_page',

meta: {

icon: 'logo-markdown',

title: 'Markdown编辑器'

component: resolve => { require(['@/view/components/markdown/markdown.vue'], resolve); }

{

path: 'editor_page',

meta: {

icon: 'ios-create',

title: '富文本编辑器'

component: resolve => { require(['@/view/components/editor/editor.vue'], resolve); }

{

path: 'icons_page',

meta: {

icon: '_bear',

title: '自定义图标'

component: resolve => { require(['@/view/components/icons/icons.vue'], resolve); }

}

]

{

path: '/update',

meta: {

icon: 'md-cloud-upload',

title: '数据上传'

component: Main,

children: [

{

path: 'update_table_page',

meta: {

icon: 'ios-document',

title: '上传Csv'

component: resolve => { require(['@/view/update/update-table.vue'], resolve); }

{

path: 'update_paste_page',

meta: {

icon: 'md-clipboard',

title: '粘贴表格数据'

component: resolve => { require(['@/view/update/update-paste.vue'], resolve); }

}

]

{

path: '/excel',

meta: {

icon: 'ios-stats',

title: 'EXCEL导入导出'

component: Main,

children: [

{

path: 'upload-excel',

meta: {

icon: 'md-add',

title: '导入EXCEL'

component: resolve => { require(['@/view/excel/upload-excel.vue'], resolve); }

{

path: 'export-excel',

meta: {

icon: 'md-download',

title: '导出EXCEL'

component: resolve => { require(['@/view/excel/export-excel.vue'], resolve); }

}

]

{

path: '/tools_methods',

meta: {

hideInBread: true

component: Main,

children: [

{

path: 'tools_methods_page',

meta: {

icon: 'ios-hammer',

title: '工具方法',

beforeCloseName: 'before_close_normal'

component: resolve => { require(['@/view/tools-methods/tools-methods.vue'], resolve); }

}

]

{

path: '/i18n',

meta: {

hideInBread: true

component: Main,

children: [

{

path: 'i18n_page',

meta: {

icon: 'md-planet',

title: 'i18n - {{ i18n_page }}'

component: resolve => { require(['@/view/i18n/i18n-page.vue'], resolve); }

}

]

{

path: '/error_store',

meta: {

hideInBread: true

component: Main,

children: [

{

path: 'error_store_page',

meta: {

icon: 'ios-bug',

title: '错误收集'

component: resolve => { require(['@/view/error-store/error-store.vue'], resolve); }

}

]

{

path: '/error_logger',

meta: {

hideInBread: true,

hideInMenu: true

component: Main,

children: [

{

path: 'error_logger_page',

meta: {

icon: 'ios-bug',

title: '错误收集'

component: resolve => { require(['@/view/single-page/error-logger.vue'], resolve); }

}

]

{

path: '/directive',

meta: {

hideInBread: true

component: Main,

children: [

{

path: 'directive_page',

meta: {

icon: 'ios-navigate',

title: '指令'

component: resolve => { require(['@/view/directive/directive.vue'], resolve); }

}

]

{

path: '/multilevel',

meta: {

icon: 'md-menu',

title: '多级菜单'

component: Main,

children: [

{

path: 'level_2_1',

meta: {

icon: 'md-funnel',

title: '二级-1'

component: resolve => { require(['@/view/multilevel/level-2-1.vue'], resolve); }

{

path: 'level_2_2',

meta: {

access: ['super_admin'],

icon: 'md-funnel',

showAlways: true,

title: '二级-2'

component: parentView,

children: [

{

path: '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',

meta: {

icon: 'md-funnel',

title: '二级-3'

component: resolve => { require(['@/view/multilevel/level-2-3.vue'], resolve); }

}

]

{

path: '/argu',

meta: {

hideInMenu: true

component: Main,

children: [

{

path: 'params/:id',

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',

meta: {

icon: 'md-flower',

title: route => `{{ query }}-${route.query.id}`,

notCache: true

component: resolve => { require(['@/view/argu-page/query.vue'], resolve); }

}

]

{

path: '/401',

meta: {

hideInMenu: true

component: resolve => { require(['@/view/error-page/401.vue'], resolve); }

{

path: '/500',

meta: {

hideInMenu: true

component: resolve => { require(['@/view/error-page/500.vue'], resolve); }

{

path: '*',

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 就能看到登录界面了

江涛校泵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php如何直接使用iview,Laravel 使用 iview-admin

iView admin是基于Vue.js，搭配使用iView UI组件库形成的一套后台集成解决方案，由TalkingData前端可视化团队部分成员开发维护.在线访问体验(密码随意填,但要记住!)github地址官方文档第一步下载 iview-admin首先你需要去 iview-admin 下载最新的包,随便你用任何方式 download.下载完后的文件夹内容image.png第二步文件整理把...
复制链接

扫一扫