1、NPM安装配置Vue和BootsrapVue
1) 使用npm创建vue项目
npm install --global vue-cli
vue init webpack vue-demo01
ESLint:一个开源的javascript代码检测工具,由Nicholas C. Zakas 于2013年6月创建。它提供一系列可配置规则,并依据这些规则校验你的javascript代码,如有不合法则给你提示。
2) 安装bootstrap-vue和bootstrap
cd vue-demo01
npm install bootstrap-vue bootstrap
2、 配置BootsrapVue
1) 应用程序入口点注册BootstrapVue
// main.js文件中 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // 安装 BootstrapVue Vue.use(BootstrapVue) // 可选地安装BootstrapVue图标组件插件 Vue.use(IconsPlugin)
2) 并导入Bootstrap和BootstrapVue css文件
// main.js文件中 import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
从文件导入时,Webpack支持在scss模块前面加上波浪号(~)scss:
// Webpack example @import '~bootstrap'; @import '~bootstrap-vue';
3) 导入网站的样式custom.css
// main.js import './custom.css'
3、测试运行BootsrapVue项目
1) 为测试BootsrapVue是否配置成功,将默认创建的App.vue中<template>标签替换成如下代码:
<template>
<div class="h2 mb-0">
<b-icon-arrow-up></b-icon-arrow-up>
<b-icon-alert-triangle-fill></b-icon-alert-triangle-fill>
</div>
</template>
2) 在vue-demo01目录执行下面命令运行项目
npm run dev
注意:
Webpack配置以加载CSS文件(官方指南)
用于SASS / SCSS文件的Webpack加载程序(官方指南)
相关文档:
https://bootstrap-vue.js.org/docs
https://cn.vuejs.org/v2/guide/