如何在 Laravel 中包含 Bootstrap-Vue

How to include Bootstrap-Vue in Laravel

提问by Santanu Biswas

How can I install/import/include Bootstrap Vueinto my laravelproject? I am new in Vue, I know how to install in a Vue JSapplication, but how can I add it laravel?

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

app.scss

应用程序.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

应用程序.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"
    })

回答by Karan Sadana

You can do this simply by node and npm. install node in your system. and then open terminal from your project root directory like you do with laravel for running artisan commands.

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

when you open terminal. simply run

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

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

Here am not installing vue .beacuse it's already installed in laravel if you check your app.js file, inside your resourcesdirectory and after successfully installing this you can import this in your app.js by

这里不是安装 vue .beacuse 如果你检查你的 app.js 文件，在你的resources目录中，它已经安装在 laravel 中，成功安装后，你可以在你的 app.js 中导入它

import BootstrapVue from 'bootstrap-vue' //Importing

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

For css you can import this by simply

对于 css，您可以简单地导入它

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

in app.scss

在 app.scss 中

After all configuration setup run

在所有配置设置运行之后

npm run dev//herewebpack do its work

npm run dev//这里webpack做它的工作

or if you are in production, you can do this by

或者如果你在生产中，你可以通过

npm run production

npm run production

回答by Manu

Just execute npm i vue bootstrap-vue bootstrapinside folder there you have package.json or manually change package.json. Then you have to add into ./resources/assets/js/bootstrap.js

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

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

Vue.use(BootstrapVue)

回答by Andrea Mauro

Install your package with

安装你的包

npm install bootstrap-vue

or

或者

yarn add bootstrap-vue

Then you can include globally your library by adding this row in your resources\js\app.jsafter window.Vue = require('vue');

然后你可以通过在你的resources\js\app.js之后添加这一行来全局包含你的库window.Vue = require('vue');

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

You can take a look to the official Vue documentationfor plugins installation

插件安装可以看一下Vue官方文档