如何在 Laravel 中包含 Bootstrap-Vue答案

【问题标题】：How to include Bootstrap-Vue in Laravel如何在 Laravel 中包含 Bootstrap-Vue
【发布时间】：2019-09-18 18:49:46
【问题描述】：

如何将Bootstrap Vue 安装/导入/包含到我的laravel 项目中？我是 Vue 的新手，我知道如何在 Vue JS 应用程序中安装，但是如何添加它 laravel？

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap/scss/bootstrap";

@import "node_modules/bootstrap/scss/bootstrap";
@import "node_modules/bootstrap-vue/src/index.scss";

.navbar-laravel {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

app.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" //Importing

    Vue.use(BootstrapVue) // Teslling Vue to use this whole application

    /**
    * The following block of code may be used to automatically register your
    * Vue components. It will recursively scan this directory for the Vue
    * components and automatically register them with their "basename".
    *
    * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
    */

    // const files = require.context('./', true, /\.vue$/i);
    // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

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

    /**
    * 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.
    */

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

【问题讨论】：

我的问题是关于Bootstrap-Vue，而不是Bootstrap
抱歉误读，但我有点困惑，文档中已经说过，如何在 vue 项目中导入 vue-bootstrap？你设置了laravel应用程序吗？你看过 laravel/resources 中的 vue app.js/components 了吗？到目前为止你尝试了什么？
我想在这个问题之前。你应该学习（查看一些教程）如何在 laravel 应用程序中运行 vue。那么你就了解了基础知识。
你需要再看一遍我的问题，如果知道如何在 laravel 中导入 bootstrap-vue 请告诉我point by point，否则你的 cmets 不相关，谢谢

标签： laravel vue.js bootstrap-vue

【解决方案1】：

只需在你有 package.json 的文件夹内执行 npm i vue bootstrap-vue bootstrap 或手动更改 package.json。然后你必须添加到./resources/assets/js/bootstrap.js

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

【讨论】：

【解决方案2】：

你可以简单地通过 node 和 npm 来做到这一点。在您的系统中安装节点。然后像使用 laravel 一样从项目根目录打开终端以运行 artisan 命令。

当你打开终端。简单地运行

npm i bootstrap-vue // you can also give save falg to save in package.json file

这里没有安装 vue 。因为如果你检查你的 app.js 文件，它已经安装在 laravel 中，在你的 resources 目录中成功安装后，您可以通过

将其导入您的 app.js

import BootstrapVue from 'bootstrap-vue' //Importing

Vue.use(BootstrapVue) // Telling Vue to use this in whole application

对于 CSS 你可以简单地导入它

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

在 app.scss 中

完成所有配置设置运行

npm run dev //herewebpack 做它的工作

或者如果你在生产中，你可以这样做

npm run production

【讨论】：

以上步骤都完成了，好像bootstrap-vue css没有加载，我已经用app.js和app.scss文件代码编辑了我的问题，请看一下
从 app.js 导入 import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' 然后运行 npm run dev 捆绑所有

【解决方案3】：

安装你的包

npm install bootstrap-vue

或

yarn add bootstrap-vue

然后，您可以通过在您的 resources\js\app.js 中 window.Vue = require('vue');

之后添加这一行来全局包含您的库

Vue.use(require('bootstrap-vue'));

插件安装可以去官方Vue documentation看看

【讨论】：