Я пытаюсь интегрировать Core-ui PRo с Laravel, но безуспешно. Я получаю пустую страницу. Нет ошибок в консоли, нет ошибок компиляции. У меня нет опыта установки этих шаблонов.
На вкладке Vue я вижу root, но ничего ниже. Внутри root есть эти данные:
путь маршрута: запрос "/ dashboard": Object (пусто) params: Object (пусто) fullPath: "/ dashboard" name: "Dashboard" meta: Object (пусто) )
Мои пакеты. 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": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-e2e-nightwatch": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-plugin-unit-jest": "^3.8.0",
"@vue/cli-service": "^3.8.4",
"@vue/test-utils": "1.0.0-beta.29",
"axios": "^0.19",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"cross-env": "^5.1",
"growl": "^1.10.5",
"https-proxy-agent": "^2.2.1",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.13",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"@babel/polyfill": "^7.4.4",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"@coreui/coreui-pro": "^2.1.14",
"@coreui/icons": "0.3.0",
"@coreui/vue": "^2.1.2",
"bootstrap": "^4.3.1",
"bootstrap-vue": "2.0.0-rc.24",
"chart.js": "^2.8.0",
"core-js": "^2.6.9",
"css-vars-ponyfill": "^2.0.2",
"flag-icon-css": "^3.3.0",
"font-awesome": "^4.7.0",
"mini-toastr": "0.6.6",
"perfect-scrollbar": "^1.4.0",
"quill": "^1.3.6",
"simple-line-icons": "^2.4.1",
"spinkit": "1.2.5",
"text-mask-addons": "^3.8.0",
"v-calendar": "^0.9.7",
"vue": "^2.6.10",
"vue-chartjs": "^3.4.2",
"vue-codemirror": "^4.0.6",
"vue-grid-layout": "^2.3.4",
"vue-mq": "^1.0.1",
"vue-multiselect": "^2.1.6",
"vue-notifications": "0.9.0",
"vue-perfect-scrollbar": "^0.1.0",
"vue-quill-editor": "^3.0.6",
"vue-resize": "^0.4.5",
"vue-router": "^3.0.6",
"vue-select": "2.4.0",
"vue-simple-calendar": "^3.0.2",
"vue-tables-2": "^1.4.70",
"vue-text-mask": "^6.1.2",
"vue2-google-maps": "^0.10.6",
"vuelidate": "^0.7.4"
}
}
Мои приложения.s css
// CoreUI Icons Set
@import '~@coreui/icons/css/coreui-icons.min.css';
/* Import Font Awesome Icons Set */
$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
$simple-line-font-path: '~simple-line-icons/fonts/';
@import '~simple-line-icons/scss/simple-line-icons.scss';
/* Import Flag Icons Set */
@import '~flag-icon-css/css/flag-icon.min.css';
/* Import Bootstrap Vue Styles */
@import '~bootstrap-vue/dist/bootstrap-vue.css';
// Import Main styles for this application
@import '../js/assets/scss/style';
Мои приложения. 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 './polyfill'
// import cssVars from 'css-vars-ponyfill'
import Vue from 'vue'
import BootstrapVue, { BvComponent } from 'bootstrap-vue'
import router from './router/index'
import coreui from '@coreui/coreui-pro'
// todo
// cssVars()
Vue.use(BootstrapVue)
Vue.component('dashboard', require('./views/Dashboard').default);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
coreui,
dashboard
})
И скопировал все папки внутри scr из пакета core-ui
И это мой блейд-файл
<!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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>CoreUI - Vue Open Source Bootstrap Admin Template</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
</head>
<!-- BODY options, add following classes to body to change options
// Header options
1. '.header-fixed' - Fixed Header
// Brand options
1. '.brand-minimized' - Minimized brand (Only symbol)
// Sidebar options
1. '.sidebar-fixed' - Fixed Sidebar
2. '.sidebar-hidden' - Hidden Sidebar
3. '.sidebar-off-canvas' - Off Canvas Sidebar
4. '.sidebar-minimized' - Minimized Sidebar (Only icons)
5. '.sidebar-compact' - Compact Sidebar
// Aside options
1. '.aside-menu-fixed' - Fixed Aside Menu
2. '.aside-menu-hidden' - Hidden Aside Menu
3. '.aside-menu-off-canvas' - Off Canvas Aside Menu
// Breadcrumb options
1. '.breadcrumb-fixed' - Fixed Breadcrumb
// Footer options
1. '.footer-fixed' - Fixed footer
-->
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
<dashboard></dashboard>
</div>
<!-- built files will be auto injected -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>