vue-cli+webpack在生成的项目中使用bootstrap实例代码


Posted in Javascript onMay 26, 2017

在html页面中加入bootstrap是很方便,就是一般的将css和js文件通过Link和Script标签就行。

那么在一个用vue-vli生成的前端项目中如何加入?因为框架不一样了,略微要适应一下。

脚手架生成项目

执行命令用webpack模板生成一个名为vuestrap的项目(名字任意)

vue init webpack vuestrap

在出现的各提示选项中,没什么要求,为了方便,把不用的ESLint,unit tests,e2e都关掉(这些选项都随意)。

? Project name vuestrap
? Project description A Vue.js project
? Author 省略
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

选项选完,项目也就生成了。

执行命令,安装脚手架创建的组件

npm install

安装jquery

bootstrap是依赖jquery的,所以就先装上jquery,这里用的版本是1.11.3。

稍后在配置的时候,是以webpack插件的方式进行打包,所以这里直接用npm进行安装,因为插件方式打包的组件都是require进来的。

执行命令,并保存到package.json中

npm install jquery@1.11.3 --save-dev

注:如果想查看npm上jquery有哪些版本,可以执行命令:

npm view jquery versions

下载和安置bootstrap所需的文件

下载bootstrap包,这里用的版本是3.3.0。

下载下来后将fonts,js,css文件夹分别放到项目目录/src/assets下。

配置jquery

将jquery以插件打包,需要为webpack的plugins进行插件设置。

在build/webpack.base.conf.js文件中,在整个配置对象的末尾增加plugins配置。

在webpack.base.conf.js中的配置项,可以在dev和build出来的pro版本中都有效。

下面的配置其实就是变量名的真正指向设置,这样,在页面中对jquery的各种名字的调用就会有效,否则bootstrap跑不起来。

plugins: [
  new webpack.ProvidePlugin({
   $: "jquery",
   jQuery: "jquery",
   "windows.jQuery": "jquery"
  })
 ]

引用bootstrap

在src/main.js文件的顶部加入如下对bootstrap主要文件的引用。

import './assets/css/bootstrap.min.css'
import './assets/js/bootstrap.min'

做完这个,也就配完了。

接下去试试看能不能用,就写个简单的页面。

 验证页面

就在App.vue中写一个页面,放一个panel,button,modal。

<template>
 <div id="app">
  <div class='container'>
   <div class='row'>
    <div class='col-lg-4'>
     <h1>demo</h1>
    </div>

    <div class='col-lg-8'>
     <div class='panel panel-default' style='min-width:500px;box-shadow:4px 4px 10px #888888;'>
      <div class="panel-heading">
       <button id='btnCreate'>
        <span class="glyphicon glyphicon-plus"></span>
       </button>
       <span>   </span>
      </div>
      <div class="panel-body">
       <div style='float: left;width:100%'>

        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
         Launch demo modal
        </button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
         <div class="modal-dialog" role="document">
          <div class="modal-content">
           <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
           </div>
           <div class="modal-body">
            ...
           </div>
           <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
           </div>
          </div>
         </div>
        </div>

       </div>
      </div>
     </div>
    </div>

   </div>
  </div>
 </div>
</template>

<script>
export default {
 name: 'app'
}
</script>

<style>
#app {
 margin-top: 60px;
}
</style>

写完后,执行命令,运行效果。

npm run dev

效果:

点击按钮,可以打开modal。

vue-cli+webpack在生成的项目中使用bootstrap实例代码 

 代码地址

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
浅谈javascript回调函数
Dec 07 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
jQuery实现视频展示效果
May 30 jQuery
BootStrap中的Fontawesome 图标
May 25 #Javascript
Vue.js 中的 $watch使用方法
May 25 #Javascript
详解Javascript获取缓存和清除缓存API
May 25 #Javascript
Angularjs 实现动态添加控件功能
May 25 #Javascript
JavaScript实现自动跳转文本功能
May 25 #Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 #Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 #Javascript
You might like
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php 前一天或后一天的日期
2008/06/28 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
jquery在Chrome下获取图片的长宽问题解决
2013/03/20 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
Python字符串处理实现单词反转
2017/06/14 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python 调试冷知识(小结)
2019/11/11 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Python函数参数分类原理详解
2020/05/28 Python
python导入库的具体方法
2020/06/18 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
毕业生自我推荐
2013/11/04 职场文书
简历的自荐信
2013/12/19 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL