快速搭建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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
js使用心得分享
Jan 13 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
Vue的MVVM实现方法
Aug 16 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
Three.JS实现三维场景
Dec 30 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
8个PHP数组面试题
2015/06/23 PHP
laravel自定义分页效果
2017/07/23 PHP
php变量与JS变量实现不通过跳转直接交互的方法
2017/08/25 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Django自定义用户认证示例详解
2018/03/14 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
用django设置session过期时间的方法解析
2019/08/05 Python
详解python statistics模块及函数用法
2019/10/27 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
深入分析python 排序
2020/08/24 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
幼师自荐信
2013/10/26 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
实验心得体会范文
2016/01/25 职场文书
团组织关系介绍信
2019/06/24 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android