Как включить Bootstrap-Vue в Laravel - PullRequest
Новая
       10

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

2 голосов
/ 30 апреля 2019

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

Ответы [ 2 ]

1 голос
/ 30 апреля 2019

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

при открытии терминала.просто запустите 

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

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

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

npm run production

1 голос
/ 30 апреля 2019

Просто выполните 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)
...