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对象和属性的创建方法
Jan 15 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
深入研究React中setState源码
Nov 17 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
浅谈React之状态(State)
Sep 19 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
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python向excel中写入数据的方法
2019/05/05 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
python 搜索大文件的实例代码
2019/07/08 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python实现指定ip端口扫描方式
2019/12/17 Python
python计算导数并绘图的实例
2020/02/29 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
会计辞职信范文
2014/01/15 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
顶岗实习计划书
2015/01/16 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
八年级历史教学反思
2016/02/19 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers