快速搭建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 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
使用JS动态显示文本
Sep 09 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
vue通过过滤器实现数据格式化
Jul 20 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
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安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
另一个javascript小测验(代码集合)
2011/07/27 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
js如何打印object对象
2015/10/16 Javascript
JavaScript中的闭包
2016/02/24 Javascript
javascript使用Promise对象实现异步编程
2016/03/01 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
极简的Python入门指引
2015/04/01 Python
详解Python中列表和元祖的使用方法
2015/04/25 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
党员个人思想汇报
2013/12/28 职场文书
实习单位接收函模板
2014/01/10 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
班级读书活动总结
2014/06/30 职场文书
公司委托书格式范本
2014/09/16 职场文书
2014年工人工作总结
2014/11/25 职场文书
小学生优秀评语
2014/12/29 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis