快速搭建vue2.0+boostrap项目的方法


Posted in Javascript onApril 09, 2018

一、Vue CLI初始化Vue项目

全局安装vue cli

npm install --global vue-cli创建一个基于 webpack 模板的新项目

vue init webpack my-project进入项目目录试运行

npm run dev

二、将BootStrap加入到Vue项目中

安装JQuery(因为Boostrap是依赖于JQuery的)

npm install jquery --save-dev

安装Boostrap

npm install bootstrap --save-dev

在main.js中分别添加jquery,bootstrap.css, bootstrap.js

import 'jquery/dist/jquery.min'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

检验

在任何模板中添加如下代码:

<div>
  <button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">点击我</button>
  <div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">模态弹出窗标题</h4>
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        </div>
        <div class="modal-body">
          <p>模态弹出窗主体内容</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>
</div>

运行npm run dev,页面出现:

快速搭建vue2.0+boostrap项目的方法

按钮呈现bootstrap的按钮样式,证明Bootstrap样式库添加成功

点击按钮出现:

快速搭建vue2.0+boostrap项目的方法

按钮能够正确的响应弹出模式对话框,证明JQuery库和Bootstrap的js库添加成功。

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

Javascript 相关文章推荐
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
javascript使用call调用微信API
Dec 15 Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
JS中call()和apply()的功能及用法实例分析
Jun 28 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
webpack 模块热替换原理
Apr 09 #Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
Apr 09 #Javascript
浅谈webpack 自动刷新与解析
Apr 09 #Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 #Javascript
详解webpack 入门与解析
Apr 09 #Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 #Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 #Javascript
You might like
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
繁简字转换功能
2006/07/19 Javascript
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
node.js路径处理方法以及绝对路径详解
2021/03/04 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
初二学习计划书范文
2014/04/27 职场文书
需求分析说明书
2014/05/09 职场文书
大学生暑假实习总结
2015/07/13 职场文书
大学新生入学感想
2015/08/07 职场文书
《鲸》教学反思
2016/02/23 职场文书
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫