Trung tâm cá nhân
sách gpt4 ăn đã đi

laravel - 如何在 Laravel 中包含 Bootstrap-Vue

In lại 作者：搜寻专家 更新时间：2023-10-30 22:21:08 25 4
mua khóa gpt4 giày nike

如何安装/导入/包含 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 -> 
    */

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

câu trả lời hay nhất

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

当您打开终端时。简单地运行

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

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

在您的 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//这里webpack做它的工作

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

npm run production

关于laravel - 如何在 Laravel 中包含 Bootstrap-Vue，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55915329/

25 4 0
Đề xuất bài viết: javascript - 在 Vue.js 中，为什么我的计算属性不起作用
Đề xuất bài viết: cơ sở dữ liệu - theo dõi [xóa(tầng/giới hạn)] và cập nhật(tầng/giới hạn)
Đề xuất bài viết: javascript - 将 surveyjs 结果发送到 API
Đề xuất bài viết: javascript - 如何将 vanilla JavaScript 添加到 vue.js 项目？
搜寻专家
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress