CoreUI Laravel集成

Question

我正在尝试将Core-ui PRo与Laravel集成在一起。我得到空白页。控制台无错误，编译无错误。我没有安装此模板的经验。

在“ Vue”选项卡中，我可以看到根，但下面没有任何内容。在根内部有以下数据：

路线 路径：“ / dashboard” 查询：对象（空） 参数：对象（空） fullPath：“ /仪表板” 名称：“仪表盘” meta：对象（空）

我的packages.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"
    }
}

我的app.scss

  // 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';

我的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 './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
})

并从core-ui包复制了scr内的所有文件夹

这是我的刀片文件

<!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>