如何在laravel项目中安装/导入/包含Bootstrap Vue?我是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"
    })

推荐答案

您只需通过node和npm就可以做到这一点.

当你打开终端时.

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

这里我没有安装vue.因为如果你判断你的应用程序,它已经安装在laravel中了.js文件,在你的resources目录中

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';

应用程序内.scss

在所有配置设置之后

npm run dev//herewebpack尽其所能

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

npm run production

Vue.js相关问答推荐

VueJS不会呈现一个名为None的组件""

如何在Vue 3中将动态特性从主零部件同步到子零部件

Vue 3 范围滑块中的多个值

仅在构建时为 Vue3 和 TailwindCSS 添加前缀

vuejs3 youtube-plugin YT 未定义控制台错误

将媒体源/流绑定到视频元素 - Vue 3 组合 API

在组件之间共享 websocket 连接

未捕获的类型错误:无法读取未定义的属性initializeApp

VueJS 将 HTML 打印到页面

Vue-Router 抽象父路由

当前端和后端位于虚拟 docker 网络中时,如何使用 axios 寻址后端主机

React.js 是否有类似 Vue.js

我可以避免使用 Vue.js 组件的重复样式吗?

在 v-for 循环中使用 v-model

如何使用 JavaScript 按索引删除数组元素?

Vue组件未在laravel 5.3中使用Passport 显示

模块构建失败:错误:没有给出解析器和文件路径,无法在 nuxtjs 中推断出解析器

Vue.js 中的 CSS 框架

如何使用 Vuetify 验证复选框组

如何在 vue.js 中通过单击事件发出值