本周我开始使用Vue.js和VueMaterial 。这对我来说真的很有趣而且是全新的，因为我多年没有使用 Javascript（原生Android是我的一杯茶）。
我目前遇到一个非常奇怪的问题，我想说这与我对框架生命周期缺乏了解有关。
问题
我第一次在 Chrome 中手动加载/刷新项目时，由于某种原因无法加载 VueMaterial 组件，我收到以下消息：
未知的自定义元素：md-toolbar - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。
我在项目中使用的每个 VueMaterial 组件（md-whiteframe、md-input-container 等）都会收到此消息。
结果如下所示：
现在，如果我通过提供另一个组件（例如 Home）的路径来专门更改 chrome 中的 URL，那么某些组件会正确显示（由于某种原因，工具栏除外）。
我返回（使用 Chrome），并登陆第一个组件，除了现在，一切都正确显示，除了工具栏（见下文）。
在某些情况下（非常罕见且完全随机），工具栏会正确显示。
语境
我通过 npm 安装了 vue-cli 并使用 webpack 模板构建了脚手架，然后也使用 npm 安装了 VueMaterial。
代码
下面是一些代码。
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
Vue.config.productionTip = false
let colorPrimary = {
color: 'red',
hue: 700,
hexa: '#D32F2F'
}
let colorAccent = {
color: 'yellow',
hue: 600,
hexa: '#FDD835'
}
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
Vue.use(VueMaterial)
Vue.material.registerTheme('default', {
primary: colorPrimary,
accent: colorAccent,
warn: colorPrimary,
background: 'white'
})
Vue.material.setCurrentTheme('default')
应用程序.vue
<template>
<div id="app">
<toolbar></toolbar>
<router-view></router-view>
</div>
</template>
<script>
import Toolbar from './components/Toolbar';
export default {
components: {
Toolbar
},
name: 'app'
}
</script>
<style src="./styles/general.css"></style>
Toolbar.vue（自定义组件）
<template>
<div id="toolbar">
<md-toolbar class="md-primary">
<h2 class="md-title" style="flex: 1">Firebucket</h2>
</md-toolbar>
</div>
</template>
<script>
export default {
name: 'toolbar'
}
</script>
<style scoped src="../styles/toolbar.css"></style>
登录.vue
<template>
<div id="login" class="bg-primary">
<md-whiteframe md-elevation="2" id="login-form">
<span class="md-title text-primary">{{wording.login}}</span>
<md-input-container>
<label>{{wording.username}}</label>
<md-input></md-input>
</md-input-container>
<md-input-container>
<label>{{wording.password}}</label>
<md-input></md-input>
</md-input-container>
<router-link id="login-button" tag="md-button" to="XX" class="md-raised md-primary">{{wording.login}}</router-link>
<br />
<md-button class="md-primary">{{wording.createAccount}}</md-button>
</md-whiteframe>
</div>
</template>
<script>
export default {
name: 'login',
data () {
return {
wording: {
login: 'Login',
createAccount: 'Create an account',
username: 'Username',
password: 'Password'
}
}
}
}
</script>
<style scoped src="../styles/login.css"></style>
路由器.js
import Vue from 'vue'
import Router from 'vue-router'
import Login from './pages/Login'
import Home from './pages/Home'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
alias: '/',
path: '/login',
name: 'login',
component: Login
}
]
})
--
再说一次，Web 开发不是我的事，我听说过很多关于 Vue.js 的好消息，所以我想尝试一下。但是很抱歉，如果我遗漏了一些非常明显的东西。
我真的无法接受这样一个事实，即它第一次没有工作，但当我回去时工作正常......
PS：路由器链接（在 Login.vue 中）也不起作用，当我点击按钮时没有任何反应，但我想这是一个不同的问题。
有人知道吗？对上面发布的代码的一般反馈非常受欢迎，因此我可以改进它。
该代码可在GitHub上找到，如果有帮助的话。
非常感谢！