vue-material 구성 요소의 임의 로드 오류

vue-material 구성 요소의 임의 로드 오류

이번 주부터 Vue.js와 VueMaterial을 가지고 놀기 시작했어요.Javascript는 몇 년 동안 하지 않았기 때문에 매우 즐겁고 전혀 새로운 것입니다(네이티브 안드로이드는 제 취향입니다).

저는 현재 프레임워크 라이프 사이클에 대한 저의 지식 부족과 관련된 매우 이상한 문제를 안고 있습니다.

쟁점.

1. Chrome에서 처음 프로젝트를 수동으로 로드/갱신할 때 어떤 이유로 인해 VueMaterial 컴포넌트 로드에 실패하고 다음 메시지가 나타납니다.

   알 수 없는 사용자 지정 요소: md-toolbar - 구성 요소를 올바르게 등록했습니까?재귀 구성 요소의 경우 "이름" 옵션을 제공해야 합니다.

프로젝트에서 사용하는 모든 VueMaterial 컴포넌트(md-whiteframe, md-input-container 등)에서 이 메시지가 나타납니다.

결과는 다음과 같습니다.

2. 여기서 다른 컴포넌트(예: Home)의 경로를 지정하여 Chrome에서 URL을 변경하면 일부 컴포넌트가 올바르게 표시됩니다(어떤 이유로 툴바를 제외).

3. (Chrome을 사용하여) 돌아가서 첫 번째 컴포넌트에 착지합니다만, 툴바(아래 참조)를 제외한 모든 것이 올바르게 표시됩니다.

특정 경우(매우 드물고 완전히 랜덤하게) 툴바가 올바르게 표시됩니다.

맥락

npm을 통해 vue-cli를 설치하고 webpack 템플릿으로 발판을 구축한 후 npm으로 Vue Material도 설치했습니다.

코드

아래는 코드의 일부입니다.

main.discloss.main.discloss.

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')

App.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>

Login.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>

router.displaces

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
    }
  ]
})

--

다시 말씀드리지만 웹 개발은 제 전문 분야가 아닙니다.Vue.js에 대해 좋은 말을 많이 들었기 때문에 시도해 보고 싶었습니다.하지만 내가 정말 명백한 것을 놓쳤다면 미안해.

처음은 안 되고 돌아가면 잘 되는 것 같아서...

PS: (Login.vue의) 라우터 링크도 동작하지 않습니다.버튼을 눌러도 아무 일도 일어나지 않습니다만, 이것은 다른 문제인 것 같습니다.

아는 사람?상기 코드에 대한 일반적인 피드백은 환영할 만한 것이므로 개선하겠습니다.

도움이 된다면 GitHub에서 코드를 사용할 수 있습니다.

정말 고마워.

Vue를 생성한 후 VueMaterial 플러그인을 추가합니다.대신 먼저 추가하세요.

Vue.use(VueMaterial)

Vue.material.registerTheme('default', {
  primary: colorPrimary,
  accent: colorAccent,
  warn: colorPrimary,
  background: 'white'
})

Vue.material.setCurrentTheme('default')

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

언급URL : https://stackoverflow.com/questions/43967565/random-loading-errors-with-vue-material-components