脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → 搭建vue2.0+boostrap项目

快速搭建vue2.0+boostrap项目的方法

 更新时间：2018年04月09日 10:30:09   作者：魔法博士  
这篇文章主要介绍了快速搭建vue2.0+boostrap项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、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">&times;</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，页面出现：

按钮呈现bootstrap的按钮样式，证明Bootstrap样式库添加成功

点击按钮出现：


按钮能够正确的响应弹出模式对话框，证明JQuery库和Bootstrap的js库添加成功。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 深入了解Vue.js中的Vuex状态管理模式

    深入了解Vue.js中的Vuex状态管理模式

    Vuex是Vue.js的官方状态管理模式，它为Vue.js应用程序提供了一个集中式的状态管理解决方案，Vuex可以帮助我们管理应用程序中所有组件的状态，使得状态管理变得更加简单和可靠，需要详细了解可以参考下文
    2023-05-05
  • Vue中子组件向父组件传值以及.sync修饰符详析

    Vue中子组件向父组件传值以及.sync修饰符详析

    .sync 修饰符所提供的功能,当一个子组件改变了一个prop的值时,这个变化也会同步到父组件中所绑定,下面这篇文章主要给大家介绍了关于Vue中子组件向父组件传值以及.sync修饰符的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue实现中部导航栏布局功能

    vue实现中部导航栏布局功能

    这篇文章主要介绍了vue实现中部导航栏布局功能，本文图文并茂，代码实例相结合介绍的非常详细，需要的朋友参考下吧
    2019-07-07
  • VUE3+mqtt封装解决多页面使用需重复连接等问题(附实例)

    VUE3+mqtt封装解决多页面使用需重复连接等问题(附实例)

    最近了解到mqtt这样一个协议,可以在web上达到即时通讯的效果,下面这篇文章主要给大家介绍了关于VUE3+mqtt封装解决多页面使用需重复连接等问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vue中的nextTick作用和几个简单的使用场景

    Vue中的nextTick作用和几个简单的使用场景

    这篇文章主要介绍了Vue中的nextTick作用和几个简单的使用场景，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2021-01-01
  • Vue使用wavesurfer.js实现音频可视化的示例详解

    Vue使用wavesurfer.js实现音频可视化的示例详解

    WaveSurfer.js是一个开源的音频可视化库,用于创建交互式、可定制的波形,本文将为大家简单介绍了Vue如何使用wavesurfer.js实现音频可视化功能,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-04-04
  • axios 封装上传文件的请求方法

    axios 封装上传文件的请求方法

    今天小编就为大家分享一篇axios 封装上传文件的请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 使用vite兼容低端浏览器配置

    使用vite兼容低端浏览器配置

    这篇文章主要介绍了使用vite兼容低端浏览器配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05
  • vue3常用的指令之v-bind和v-on指令用法

    vue3常用的指令之v-bind和v-on指令用法

    vue的v-on与v-bind,v-on就是用于绑定事件的,下面这篇文章主要给大家介绍了关于vue3常用的指令之v-bind和v-on指令用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • vue如何解决el-select下拉框显示ID不显示label问题

    vue如何解决el-select下拉框显示ID不显示label问题

    这篇文章主要介绍了vue如何解决el-select下拉框显示ID不显示label问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06

最新评论