文章/答案/技术大牛

发布

社区首页 >问答首页 >如何添加引导4JS与VueJS一起使用Modal

问如何添加引导4JS与VueJS一起使用Modal
EN

Stack Overflow用户

提问于 2017-08-17 08:57:21

回答 1查看 1.3K关注 0票数 2

我从https://bootstrap-vue.js.org安装了我的项目引导-vue，因为我在项目中使用VueJS。我是刚接触过vuejs的人，所以到目前为止我还不太了解。我试图添加一个引导模式，但没有起作用。我知道我的模块中缺少引导js。

我把我的index.html从引导和工作cdn。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

但这是一个丑陋的解决方案。

<template>
<div>
    <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</div>
</template>

有人知道如何在带有npm模块的vuejs中使用引导js吗？

twitter-bootstrap

vuejs2

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-17 09:31:06

1。运行：

npm i jquery tether bootstrap --save-dev

2。将build/webpack.dev.conf.js和build/webpack.prod.conf.js中的ProvidePlugin添加到plugins数组中

plugins: [ 
  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery',
    'Tether': 'tether'
  })
]

3。然后：

npm i --save-dev expose-loader

在您的入口点main.js中使用如下：

import Vue from 'vue'
import App from './App'
require('expose-loader?$!expose-loader?jQuery!jquery')
require('bootstrap');

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45730697

复制

相似问题

问如何添加引导4JS与VueJS一起使用Modal
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加引导4JS与VueJS一起使用ModalEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何添加引导4JS与VueJS一起使用Modal
EN