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 相关文章推荐
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
微信小程序实现购物页面左右联动
Feb 15 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
Javascript实现关闭广告效果
Jan 29 Javascript
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
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
PHP进程通信基础之信号
2017/02/19 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
js单向链表的具体实现实例
2013/06/21 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
浅谈angularJS中的事件
2016/07/12 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
python scatter函数用法实例详解
2020/02/11 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
python爬取天气数据的实例详解
2020/11/20 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
高中自我鉴定范文
2013/11/03 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
入党自我鉴定
2014/03/25 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
迟到检讨书
2015/01/26 职场文书
清洁工个人总结
2015/03/04 职场文书
公司开业主持词
2015/07/02 职场文书
python学习之panda数据分析核心支持库
2021/05/07 Python
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python