vue.js - 布局中的 Vue-material 组件未出现在 Nuxt.js 应用程序中
问题描述
我正在尝试使用Vue Material作为我的 UI 库来创建Nuxt.js应用程序。我还在使用nuxt-vue-material以便能够在我的所有文件中使用来自 Vue Material 的组件，并且我正在寻找使用自定义主题。有了所有这些，我的文件看起来像这样.vuenuxt.config.js
export default {
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'server',
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
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' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap' }
]
},
/*
** Global CSS
*/
css: [
'@assets/scss/reset.scss',
'vue-material/dist/vue-material.min.css',
'vue-material/dist/theme/default.css',
'@assets/scss/global.scss',
'@assets/scss/theme.scss',
],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [
],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
['nuxt-vue-material', {
theme: null,
components: ['MdApp', 'MdContent', 'MdList', 'MdButton', 'MdToolbar',]
}]
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {
}
}
我的项目结构如下所示：
我想要做的是添加一个简单的布局，你有一个header main content coming from the current page, footer。
我的layouts/default.vue样子是这样的：
<template>
<div class="page-container">
<md-app>
<app-header />
<md-app-content>
<nuxt keep-alive />
</md-app-content>
<app-footer />
</md-app>
</div>
</template>
<script>
import AppFooter from "~/components/app-footer";
import AppHeader from "~/components/app-header";
export default {
name: "default-layout",
components: {
AppHeader,
AppFooter
}
};
</script>
<style scoped lang="scss">
.md-app {
height: 100%;
}
</style>
所以基本上我只是使用与Vue Material 示例文档中相同的结构来启动应用程序。
在里面components/app-header.vue我有以下代码：
<template>
<md-toolbar>
<span class="md-title">Hi there</span>
</md-toolbar>
</template>
<script>
export default {
name: "app-header"
}
</script>
所以它基本上只是<md-toolbar>组件的包装器，而我<app-footer/>目前只是输出<span>Footer goes here</span>，所以没什么特别的。
最后，我有我迄今为止唯一的页面，在pages/index.vue，包含：
<template>
<h1>Hi there I'm the backen.de Homepage</h1>
</template>
运行时npm run dev，在浏览器中我看到以下输出：
所以我得到了输出<md-app>，<md-content>但是我看不到任何来自<app-header>and的东西<app-footer/>。
现在奇怪的是，如果我将我<app-header/>的 from移动layouts/default.vue到pages/index.vue，就像这样：
<template>
<div>
<app-header />
<h1>Hi there I'm the backen.de Homepage</h1>
</div>
</template>
<script>
import AppFooter from "~/components/app-footer";
import AppHeader from "~/components/app-header";
export default {
name: "index",
components: {
AppHeader
}
};
</script>
然后我得到以下结果：
所以我得到了<md-toolbar>来自当前页面的内容的渲染，但这当然不是我想要的，因为我想要所有页面上的相同工具栏（这就是我有布局的原因）。
我的控制台没有显示任何错误。
我的package.json长相是这样的
{
"name": "backen-nuxt-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
},
"author": "Tamás Kuti",
"license": "ISC",
"dependencies": {
"@nuxtjs/axios": "^5.12.2",
"nuxt": "^2.14.6",
"nuxt-vue-material": "^1.2.0",
"vue-material": "^1.0.0-beta-15"
},
"devDependencies": {
"@nuxt/types": "^2.14.7",
"node-sass": "^4.14.1",
"sass-loader": "^10.0.3"
}
}
任何想法表示赞赏，谢谢！