Materialize-css+Laravel+VueJS - 在哪里初始化 modals，side-nav 等答案

【问题标题】：Materialize-css+Laravel+VueJS - where to initialize modals, side-nav etcMaterialize-css+Laravel+VueJS - 在哪里初始化 modals，side-nav 等
【发布时间】：2017-03-02 10:30:55
【问题描述】：

我正在尝试使用 Laravel 5.4、Laravel Mix、VueJS 和 Materialize-css 构建一个网站。

VueJS 和 jQuery 是 Laravel 自带的，所以没什么可做的。所有创建的组件都可以正常工作。

我按照website 上的说明通过 npm 安装了 Materialize-css。

但是现在当我尝试实现应该在单击按钮时飞入的 sidenav 时出现错误。其他材料组件（如 Toasts、Collapsibles）工作正常。

这是我的 bootstrap.js，它加载了 jQuery、Materialize-css 等：

window._ = require('lodash');

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

require('materialize-css');
import 'materialize-css/js/materialize.js';
import 'materialize-css/bin/materialize.js';

window.Vue = require('vue');

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

这是我的 adminarea.js，其中包含我管理区域所需的所有内容：

require('./bootstrap');

Vue.component('example', require('./Vue/components/Example.vue'));
Vue.component('admindashboard', require('./Vue/components/Admindashboard.vue'));
Vue.component('test', require('./Vue/components/Test.vue'));
Vue.component('adminnav', require('./Vue/components/Adminnav.vue'));

const app = new Vue({
    el: '#app',
    data: {
        title: 'Admindashboard'
    },
    methods: {},
    mounted() {
        console.log('Da bin ich!');
        Materialize.toast('I am a toast!', 4000);
    }
});

我的管理组件：

<template>
    <div>
        <ul id="slide-out" class="side-nav">
            <li><div class="userView">
                <div class="background">
                    <img src="">
                </div>
                <a href="#!user"><img class="circle" src=""></a>
                <a href="#!name"><span class="white-text name">John Doe</span></a>
                <a href="#!email"><span class="white-text email">jdandturk@gmail.com</span></a>
            </div></li>
            <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
            <li><a href="#!">Second Link</a></li>
            <li><div class="divider"></div></li>
            <li><a class="subheader">Subheader</a></li>
            <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
        </ul>
        <a href="#" data-activates="slide-out" class="btn" v-on:click="openSidenav">Sidenav</a>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Mainnav mounted');
        },
        methods: {
            openSidenav(){
                $('.button-collapse').sideNav('show');
            }
        }
    }
</script>

还有 html 文件：

<body>
    <div id="app">
        <adminnav></adminnav>

        @yield('content')
    </div>

    <script src="{{ asset('assets/js/adminarea.js') }}"></script>
</body>

jQuery 本身也可以。我不知道在哪里初始化 matrilizecss-components。有什么想法吗？

谢谢！

【问题讨论】：

标签： laravel npm materialize vuejs2

【解决方案1】：

看看https://vuematerial.github.io/#/getting-started 你有很多非常容易使用的自定义组件。如果你想坚持你的实施，你有两个选择

import Materialize from 'materialize-css/js/materialize.js';
const app = new Vue({
 el: '#app',
 data: {
    title: 'Admindashboard'
 },
 methods: {},
 mounted() {
    console.log('Da bin ich!');
    Materialize.toast('I am a toast!', 4000);
 }
});

或

从 'materialize-css/js/materialize.js' 导入 Materialize； window.Materialize = 实现；

我建议不要将 Vue 设置为窗口，因为没有必要这样做。与 axios 相同。您可以改为将 axios 绑定到 vue 实例。 Vue.prototype.$http = axios。之后您可以通过this.$http.get.... 拨打电话。也只坚持进口而不是结合需求和进口。

【讨论】：

【解决方案2】：

我找到了解决办法：

而不是 adminarea.js 中的 require('materialize-css')（通常是全新 Laravel 安装中的 app.js）我必须使用 require('materialize-css/dist/js/materialze.js') 和 require('materialize-css/js/init.js')。

现在一切正常。

【讨论】：