作为
web
开发人员,很多人用的样式库,最多的应该就是bootstrap
吧, 那么使用 VUE 来进行项目开发,如何引入bootstrap
呢?
首先 使用 cli
进行初始化项目,这里就不多说了.
使用 npm 进行安装
npm install bootstrap --save
当前安装的是版本是 bootstrap@4.1.3
,可能随着版本变化,应该会有所升级
接着 引入安装好的 bootstrap , 编辑 main.js
.
.
.
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
.
.
.
ok,上面我们引入了 b4 的 css 以及 js,但是如果你是全新的项目,直接 执行以上步骤,应该会报如下错误:
1_1537346722_XHPaVt8Q5e.png
提示我们 jquery 以及 popper.js 找不到,并,让我们进行安装 那么,安装好了
npm install --save jquery popper.js
这样就引入了 bootstrap 样式 以及他的 js 了,随便打开一个组件,编写 b4 的语法,即可看到效果
其实,还有一套专门为 vue 开发的 bootstrap
,bootstrap-vue
关于他的用法,直接看 bootstrap-vue
官方文档 就好了。
我们既然安装了 jQuery 那么在组件中就要使用,如何使用 jQuery呢? 打开 build\webpack.base.conf.js
,首先引入 webpack
const webpack = require("webpack")
其次~ 在 webpack.base.conf.js
中的 module.exports = {}
添加如下内容:
plugins: [
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
],
最后在 main.js
中 引入jQuery
import 'bootstrap/dist/css/bootstrap.min.css'
import $ from 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'
这样,我们就在项目中引入了 b4,并且配置了 jQuery
.
关于极客返利
极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。
版权许可
本作品采用 知识共享署名 4.0 国际许可协议 进行许可。转载无需与我联系,但须注明出处,注明文章来源 Vue CLI 引入 bootstrap4