我如何安装/导入/包含引导程序Vue https://bootstrap-vue.js.org/docs/进入我的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"
})
您可以简单地通过 Node 和 npm 来完成此操作。
在您的系统中安装节点。然后从项目根目录打开终端,就像使用 laravel 运行 artisan 命令一样。
当你打开终端时。
只需运行
npm i bootstrap-vue // you can also give save falg to save in package.json file
这里没有安装 vue 。因为它已经安装在 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
//这里webpack做它的工作
或者如果您正在生产中,您可以通过以下方式执行此操作
npm run production
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)