快速搭建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词法作用域与调用对象深入理解
Nov 29 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 Javascript
js数组中去除重复值的几种方法
Aug 03 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的库,结果发现很多东西
2006/12/31 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
js正则相关知识点专题
2018/05/10 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
Python3处理文件中每个词的方法
2015/05/22 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
携程英文网站:Trip.com
2017/02/07 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
小学数学教学经验交流材料
2014/05/22 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python