通过npm安装配置BootsrapVue项目(Vue和Bootstrap)

简介：

本文主要介绍通过npm使用BootstrapVue来构建Vue.js和Bootstrap的项目，以及相关配置。

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>
  <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

了解更多分析及数据抓取可查看：
http://data.yisurvey.com:8989/
特别说明：本文旨在技术交流，请勿将涉及的技术用于非法用途，否则一切后果自负。如果您觉得我们侵犯了您的合法权益，请联系我们予以处理。