使用VueJs处理资产 - Laravel 5.5

Question

我是一个新手，想要将VueJs应用于前端，与Laravel 5.5后端结合起来创建一个新应用程序。我遇到了相同的问题，无法定义项目结构，并且不知道如何从.vue文件中访问资源。

代码组件：

<template>
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">Dashboard</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
            </ol>
        </div>
    </div>
</template>
    <script src="{{ asset('assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}" type="text/javascript"></script>

App.js

import Vue from 'vue'

import VueRouter from 'vue-router'
Vue.use(VueRouter)

import axios from 'axios';
import VueAxios from 'vue-axios';


axios.interceptors.request.use(function(config){
    config.headers['X-CSRF-TOKEN'] = window.Laravel.csrfToken
    return config
})

Vue.prototype.$http  = axios

Vue.use(VueAxios, axios);

let Mytoolbar = require('./components/Toolbar.vue');
let Mysidebar = require('./components/Sidebar.vue');
let Myfooter = require('./components/Footer.vue');
let Home = require('./components/Home.vue');


const routes = [
  { path: '/home', component: Home }
]


const router = new VueRouter({ mode: 'history', routes: routes })

const app = new Vue({
    el: '#app',
    router,
    components: {Mytoolbar,Mysidebar,Myfooter}
});

- Malek Ben el ouafi

---

你试过看Laravel Mix了吗？https://laravel.com/docs/5.5/mix - LorenzoBerti

是的，我认为Laravel Mix是将脚本或样式文件组合在一起，但我的需求是每个组件都有自己的脚本和样式：我认为最好为每个页面仅使用所需的脚本和样式。 - Malek Ben el ouafi

我非常确定这不是首选的做法。通常，您将所有JS文件和依赖项连接成1或2个JS文件，仅加载这些文件。如果您确实需要将某些JS请求限定于某些组件，则可以在模板中的created()方法中加载文件。 - DevK

Answer 1

你有两个选择。这个脚本：

<script src="{{ asset('assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js') }}" type="text/javascript"></script>

应该放在app.blade.php底部的脚本部分。

或者（这是更好的方法）

您应该将其添加到resources/assets/js/plugins/bootstrap-fileinput/bootstrap-fileinput.js中的供应商目录中

然后像这样在您的app.js中要求它：

require('./plugins/bootstrap-fileinput/bootstrap-fileinput.js')

- BassMHL