Laravel vue 和 js 的刀片困境

Question

猜这是一个愚蠢的问题，但我不知道解决方案。 我想将一个 vue 组件和 js 文件加载到刀片视图中。 当我放

<script src="{{ asset('js/app.js') }}"></script>
<script src="{{ asset('js/selectize_settings.js') }}"></script>

它加载 selectize_settings.js 文件但不加载 vue。 当我把延迟

<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/selectize_settings.js') }}"></script>

它加载 vue 组件，但不加载 selectize_settings.js（ReferenceError: $ 未定义）。 我知道这是因为在我加载 selectize_settings.js 时没有通过 app.js 加载 jquery。

应用程序.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'selectize/dist/css/selectize.default.css'

window.$ = window.jQuery = require('jquery')
require('selectize');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

测试刀片.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="{{ asset('js/selectize_settings.js') }}"></script>
    <script src="https://kit.fontawesome.com/4262f4e15a.js" crossorigin="anonymous"></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">


</head>
<body>
    <div id="app">
        <div class="control-group">
            <label for="select-beast">Beast:</label>
            <select id="select-beast" class="demo-default" placeholder="Select a person...">
                <option value="">Select a person...</option>
                <option value="4">Thomas Edison</option>
                <option value="1">Nikola</option>
                <option value="3">Nikola Tesla</option>
                <option value="5">Arnold Schwarzenegger</option>
            </select>
        </div>
        <div class="vue-comp">
            <example-component></example-component>
        </div>
    </div>
</body>
</html>

selectize_settings.js

$( document ).ready(function() {
    $('#select-beast').selectize({
        create: true,
        sortField: {
            field: 'text',
            direction: 'asc'
        },
        dropdownParent: 'body'
    });
});

示例组件.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

我希望有人可以提供帮助。 你好！

Answer 1

在你的 app.js 中试试这个

//...
global.$ = global.jQuery = require('jquery');
//...

您也可以删除延迟属性

<script src="{{ asset('js/app.js') }}"></script>

Answer 2

尝试这个：

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Answer 3

好的，当您将 defer 放入 js 文件时它也可以工作！

<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/selectize_settings.js') }}" defer></script>

Laravel vue 和 js 的刀片困境

问题描述

3 个解决方案

解决方案1
0 2020-01-27 18:02:52

解决方案2
0 2020-01-27 18:47:23

解决方案3
0 2020-01-27 21:13:25

Laravel vue 和 js 的刀片困境

问题描述

3 个解决方案

解决方案1 0 2020-01-27 18:02:52

解决方案2 0 2020-01-27 18:47:23

解决方案3 0 2020-01-27 21:13:25

解决方案1
0 2020-01-27 18:02:52

解决方案2
0 2020-01-27 18:47:23

解决方案3
0 2020-01-27 21:13:25