5.2.2、Bootstrap-Vue 使用

一、使用 webpack 生成项目

如果没有webpack可以顺便装一个 npm install -g webpack 安装全局的，用起来也方便

安装 web-pack：

cnpm install -g webpack

首先需要在命令行中进入到项目目录，然后输入：

vue init webpack jeebiz-ui-bootstrap

二、安装基础依赖

# With npm
cnpm install axios echarts vue-cookies vue-ueditor-wrap vuex vuex-along --save
cnpm install ckeditor4-vue dingtalk-jsapi --save
# With yarn
yarn add axios echarts vue-cookies vue-ueditor-wrap vuex vuex-along
yarn add ckeditor4-vue dingtalk-jsapi

如果你想支持较旧的IE、Android和iOS设备web浏览器，您可能需要使用core js和intersection observer：

# With npm
cnpm install core-js regenerator-runtime intersection-observer --save
# With yarn
yarn add core-js regenerator-runtime intersection-observer

import 'core-js/stable'
import 'regenerator-runtime/runtime'
import 'intersection-observer' // Optional
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

2.1、配置 scss 解析

https://blog.csdn.net/robot7th/article/details/100642085

安装sass 依赖包 ，在cmd界面输入：

cnpm install node-sass sass-loader@7.3.1 --save-dev

peerDependencies WARNING sass-loader@^8.0.2 requires a peer of webpack@^4.36.0 || ^5.0.0 but webpack@3.12.0 was installed
peerDependencies WARNING sass-loader@^8.0.2 requires a peer of sass@^1.3.0 but none was installed
peerDependencies WARNING sass-loader@^8.0.2 requires a peer of fibers@>= 3.1.0 but none was installed

cnpm install fibers sass webpack@^4.36.0  -g

2.找到build中webpack.base.conf.js,在rules中添加scss规则

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

④ 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

⑤ scss使用测试：如下测试修改字体颜色

<style lang="scss">
$color:red;
div {color:$color;}
</style>

三、引入 bootstrap-vue 前端组件

3.1、使用模块绑定器

如果你使用的是 Webpack、packet或rollup.js 之类的模块捆绑包，那么你可能希望直接将该包包含到项目中。要开始使用，请使用yarn或npm获取最新版本的Vue.js、BootstrapVue和Bootstrap v4：

# With npm
cnpm install bootstrap-vue bootstrap --save

# With yarn
yarn add vue bootstrap-vue bootstrap

然后，在应用入口注册BootstrapVue：

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

并且引入 Bootstrap 和 BootstrapVue 样式文件:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

或者你可以从自定义的SCSS文件中引入 Bootstrap 和 BootstrapVue 样式文件:

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

确保在App入口，引入 custom.scss 自定义样式文件:

import './custom.scss'

3.2、组件集和指令作为Vue插件

你可以从bootstrap-vue 导入组件集和指令作为Vue插件

// This imports all the layout components such as <b-container>, <b-row>, <b-col>:
import { LayoutPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin)

// This imports <b-modal> as well as the v-b-modal directive as a plugin:
import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)

// This imports <b-card> along with all the <b-card-*> sub-components as a plugin:
import { CardPlugin } from 'bootstrap-vue'
Vue.use(CardPlugin)

// This imports directive v-b-scrollspy as a plugin:
import { VBScrollspyPlugin } from 'bootstrap-vue'
Vue.use(VBScrollspyPlugin)

// This imports the dropdown and table plugins
import { DropdownPlugin, TablePlugin } from 'bootstrap-vue'
Vue.use(DropdownPlugin)
Vue.use(TablePlugin)

3.3、单个组件和指令

如果你只想拉入特定组件或组件集，可以通过直接导入这些组件来完成此操作。
要选择一个组件/指令，首先将其导入正在使用它的文件中：

// Place all imports from 'bootstrap-vue' in a single import
// statement for optimal bundle sizes
import { BModal, VBModal } from 'bootstrap-vue'

单独添加组件

Vue.component('my-component', {
  components: {
    'b-modal': BModal
  },
  directives: {
    // Note that Vue automatically prefixes directive names with `v-`
    'b-modal': VBModal
  }
  // ...
})

或全局注册组件：

Vue.component('b-modal', BModal)
// Note that Vue automatically prefixes directive names with `v-`
Vue.directive('b-modal', VBModal)