开发手册 欢迎您!
软件开发者资料库

通过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'// 安装 BootstrapVueVue.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.jsimport './custom.css'

3、测试运行BootsrapVue项目

1) 为测试BootsrapVue是否配置成功,将默认创建的App.vue中