快速搭建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初学困境—js初学
Dec 29 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 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高级编程实例:编写守护进程
2014/09/02 PHP
php操作redis缓存方法分享
2015/06/03 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
js确定对象类型方法
2012/03/30 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
javascript 回调函数详解
2014/11/11 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
python实现顺序表的简单代码
2018/09/28 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
公共场所标语
2014/06/30 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
2016春季运动会前导词
2015/11/25 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技