Как включить Bootstrap-Vue в Laravel

Как я могу установить/импортировать/включить Начальная загрузка 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

Santanu Biswas 30.04.2019 09:02

извините за неправильное прочтение, но я немного запутался, в документах уже сказано, как импортировать vue-bootstrap внутри проекта vue? вы установили приложение laravel? вы смотрели vue app.js/components внутри laravel/resources? что вы пробовали до сих пор?

user10753862 30.04.2019 09:06

Я думаю перед этим вопросом. вы должны узнать (проверьте некоторые учебники), как запустить vue в приложении laravel. тогда вы понимаете основы.

user10753862 30.04.2019 09:09

Вам нужно еще раз прочитать мой вопрос, если знаете, как импортировать bootstrap-vue в laravel, то дайте мне знать point by point, иначе ваши комментарии не актуальны, спасибо

Santanu Biswas 30.04.2019 09:10
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
9
4
20 904
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Просто выполните 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)
Ответ принят как подходящий

Вы можете сделать это просто с помощью node и npm. установить узел в вашей системе. а затем откройте терминал из корневого каталога вашего проекта, как вы это делаете с laravel для запуска команд artisan.

когда вы открываете терминал. просто беги

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

Здесь я не устанавливаю vue .beacuse, он уже установлен в laravel, если вы проверите свой файл app.js внутри вашего каталога 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';

в приложении.scss

После всех настроек конфигурации бегать

npm run dev // здесь веб-пакет делает свою работу

или если вы находитесь в производстве, вы можете сделать это,

npm run production

Выполнив все вышеперечисленные шаги, похоже, что bootstrap-vue css не загружен, я отредактировал свой вопрос с кодом файла app.js и app.scss, пожалуйста, посмотрите

Santanu Biswas 30.04.2019 09:23

импортируйте его из app.js import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css', затем запустите npm run dev, чтобы связать все

Karan Sadana 30.04.2019 09:26

Установите свой пакет с помощью

npm install bootstrap-vue

или

yarn add bootstrap-vue

Затем вы можете глобально включить свою библиотеку, добавив эту строку в свой ресурсы\js\app.js после window.Vue = require('vue');

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

Вы можете посмотреть официальный Vue-документация для установки плагинов

Другие вопросы по теме