如何在Laravel中包含Bootstrap-Vue [英] How to include Bootstrap-Vue in Laravel

问题描述

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

How can I install/import/include Bootstrap Vue into my laravel project? I am new in Vue, I know how to install in a Vue JS application, but how can I add it laravel?

app.scss

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

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"
    })

推荐答案

您可以仅通过node和npm来执行此操作. 在系统中安装节点.然后从项目根目录打开终端，就像使用laravel来运行artisan命令一样.

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.

打开终端时. 只需运行

when you open terminal. simply run

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

这里没有安装vue.因为如果您在resources目录中检查app.js文件，它已经在laravel中安装了 成功安装后，您可以通过以下方式将其导入到您的app.js中:

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

import BootstrapVue from 'bootstrap-vue' //Importing

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

对于CSS 您可以通过简单的方式导入

For css you can import this by simply

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

在app.scss中

所有配置设置完成后 运行

After all configuration setup run

npm run dev//此处是webpack的工作

npm run dev //herewebpack do its work

或者如果您正在生产中，则可以通过

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

npm run production

这篇关于如何在Laravel中包含Bootstrap-Vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！