我目前正在开发一个带有 frest 管理模板的 nuxt 应用程序。我已经将模板内置的一些页面转换为 nuxt 页面组件。当我浏览页面时,一些基于 javascript/jquery 的组件没有正确加载(图表、实时图标)。
这就是它应该如何来的。
但这就是它的显示方式。
这是我的 nuxt.config.js 文件
export default {
mode: 'spa',
/*
** Headers of the page
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || ''
}
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
script: [
{ src: '/app-assets/vendors/js/vendors.min.js'},
{ src: '/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.tools.js'},
{ src: '/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.defaults.js'},
{ src: '/app-assets/fonts/LivIconsEvo/js/LivIconsEvo.min.js'},
{ src: '/app-assets/vendors/js/forms/select/select2.full.min.js'},
{ src: '/app-assets/vendors/js/ui/prism.min.js'},
{ src: '/app-assets/js/scripts/configs/vertical-menu-light.js'},
{ src: '/app-assets/js/core/app-menu.js'},
{ src: '/app-assets/js/core/app.js'},
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [
'~/static/app-assets/vendors/css/vendors.min.css',
'~/static/app-assets/vendors/css/ui/prism.min.css',
'~/static/app-assets/css/bootstrap.css',
'~/static/app-assets/css/bootstrap-extended.css',
'~/static/app-assets/css/colors.css',
'~/static/app-assets/css/components.css',
'~/static/app-assets/css/themes/dark-layout.css',
'~/static/app-assets/css/themes/semi-dark-layout.css',
'~/static/app-assets/css/core/menu/menu-types/vertical-menu.css',
'~/static/app-assets/css/pages/dashboard-analytics.css',
'~/static/app-assets/css/pages/dashboard-ecommerce.css',
'~/static/app-assets/css/pages/app-file-manager.css',
'~/static/assets/css/style.css',
// '~/static/app-assets/css/pages/app-email.css',
'~/static/app-assets/vendors/css/editors/quill/quill.snow.css',
],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js dev-modules
*/
buildModules: [
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
'@nuxtjs/auth'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: 'secret'
},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {}
},
auth: {
strategies: {
local: {
endpoints: {
login: { url: 'login', method: 'post', propertyName: 'data.token' },
user: { url: 'me', method: 'get', propertyName: 'data' },
logout: false
}
}
}
}
}
我不能真正放置我的仪表板页面组件,因为它太大而不能放在这里(字符限制)。但我会放上我认为可能有帮助的部分。
<template>
<div>
<!--some wrappers and components-->
<!-- Multi Radial Chart Starts -->
<div class="col-xl-4 col-md-6 col-12 dashboard-visit">
<div class="card">
<div
class="card-header d-flex justify-content-between align-items-center"
>
<h4 class="card-title">Drive Space Used</h4>
<i
class="bx bx-dots-vertical-rounded font-medium-3 cursor-pointer"
></i>
</div>
<div class="card-content">
<div class="card-body">
<div id="multi-radial-chart"></div>
<ul
class="list-inline d-flex justify-content-around mb-0"
>
<li>
<span
class="bullet bullet-xs bullet-primary mr-50"
></span
>Sheets
</li>
<li>
<span
class="bullet bullet-xs bullet-danger mr-50"
></span
>Docs
</li>
<li>
<span
class="bullet bullet-xs bullet-warning mr-50"
></span
>Images
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
head: {
bodyAttrs: {
class:
'vertical-layout vertical-menu-modern 2-columns navbar-sticky fixed-footer',
'data-open': 'click',
'data-menu': 'vertical-menu-modern',
'data-col': '2-columns'
},
script: [
{ src: '/app-assets/vendors/js/charts/apexcharts.min.js' },
{ src: '/app-assets/vendors/js/extensions/swiper.min.js' },
{ src: '/app-assets/js/scripts/pages/dashboard-ecommerce.js' },
{ src: '/app-assets/vendors/js/extensions/dragula.min.js' },
{ src: '/app-assets/js/scripts/pages/dashboard-analytics.js' }
]
},
middleware: 'auth'
}
</script>
我在这里做错了什么?干杯..