快速搭建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 相关文章推荐
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
给js文件传参数(详解)
Jul 13 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
Node.js简单入门前传
Aug 21 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
通过js示例讲解时间复杂度与空间复杂度
Aug 06 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
vue element和nuxt的使用技巧分享
Jan 14 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
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php自定文件保存session的方法
2014/12/10 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
PHP在线书签系统分享
2016/01/04 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
学习ExtJS form布局
2009/10/08 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
小程序实现可拖动的悬浮按钮
2020/09/07 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python实现简单登录验证
2016/04/13 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python机器学习实现决策树
2019/11/11 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
小学教学随笔感言
2014/02/26 职场文书
文明班级建设方案
2014/05/15 职场文书
投标服务承诺书
2014/05/28 职场文书
授权委托书格式
2014/07/31 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
七个Python必备的GUI库
2021/04/27 Python