Vuejs2 如何在项目中使用vue材质

我正在尝试在我的laravel v.5.5项目中实现，我已经安装了该软件包，并且我正在导入我的

app.js

中的js部分和我的sass文件中的css文件，如文档中所述：

App.js

window.Vue = require('vue');

import VueMaterial from 'vue-material';
Vue.use(VueMaterial);

@import '~vue-material/dist/vue-material.min.css';

App.scss

window.Vue = require('vue');

import VueMaterial from 'vue-material';
Vue.use(VueMaterial);

@import '~vue-material/dist/vue-material.min.css';

我正在尝试实现

vue材质

t只是为了在vue

示例组件中测试它：

<template>
  <div class="page-container">
    <md-app md-waterfall md-mode="fixed-last">
      <md-app-toolbar class="md-large md-dense md-primary">
        <div class="md-toolbar-row">
          <div class="md-toolbar-section-start">
            <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
              <md-icon>menu</md-icon>
            </md-button>

            <span class="md-title">My Title</span>
          </div>

          <div class="md-toolbar-section-end">
            <md-button class="md-icon-button">
              <md-icon>more_vert</md-icon>
            </md-button>
          </div>
        </div>

        <div class="md-toolbar-row">
          <md-tabs class="md-primary">
            <md-tab id="tab-home" md-label="Home"></md-tab>
            <md-tab id="tab-pages" md-label="Pages"></md-tab>
            <md-tab id="tab-posts" md-label="Posts"></md-tab>
            <md-tab id="tab-favorites" md-label="Favorites"></md-tab>
          </md-tabs>
        </div>
      </md-app-toolbar>

      <md-app-drawer :md-active.sync="menuVisible">
        <md-toolbar class="md-transparent" md-elevation="0">Navigation</md-toolbar>

        <md-list>
          <md-list-item>
            <md-icon>move_to_inbox</md-icon>
            <span class="md-list-item-text">Inbox</span>
          </md-list-item>

          <md-list-item>
            <md-icon>send</md-icon>
            <span class="md-list-item-text">Sent Mail</span>
          </md-list-item>

          <md-list-item>
            <md-icon>delete</md-icon>
            <span class="md-list-item-text">Trash</span>
          </md-list-item>

          <md-list-item>
            <md-icon>error</md-icon>
            <span class="md-list-item-text">Spam</span>
          </md-list-item>
        </md-list>
      </md-app-drawer>

      <md-app-content>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quibusdam, non molestias et! Earum magnam, similique, quo recusandae placeat dicta asperiores modi sint ea repudiandae maxime? Quae non explicabo, neque.</p>
      </md-app-content>
    </md-app>
  </div>
</template>
<script>
export default {
  data: () => ({
    menuVisible: false
  })
}
</script>


菜单
我的头衔
更多
航行
将\移动到\收件箱
收件箱
发送
发送邮件
删除
废物箱
错误
垃圾邮件
Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

Lorem ipsum dolor sit amet，奉献精英。错误quibusdam，非molestias et！大事件、类似事件、大事件、大事件、大事件？不可解释的理由，内克

导出默认值{
数据：（）=>({
menuVisible:错误
})
}

然后我在刀片视图中使用组件，如下所示：

我怎样才能解决这个问题

@section('content')
 <example-component></example-component>
@endsection

@节（“内容”）
@端部

但是，导航根本没有固定，抽屉也不工作，我做错了什么？
您的浏览器控制台日志怎么说？一定有什么错误消息。。