Question

我安装在我的项目bootstrap-vue中 https://bootstrap-vue.js.org，因为我在项目中使用了VueJS。我是vuejs的新手所以到目前为止我还不知道。我试图添加一个bootstrap模式，但没有工作。我知道模块中缺少bootstrap js。

我将自己的index.html从bootstrap中输入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中使用bootstrap js吗？

Answer 1

<强> 1 即可。运行：

ProvidePlugin

<强> 2 即可。将plugins添加到 build / webpack.dev.conf.js 和 build / webpack.prod.conf.js 中的plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery', jQuery: 'jquery', 'Tether': 'tether' }) ]数组中

npm i --save-dev expose-loader

第3 即可。然后：

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

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

Dim count As Integer

Set wrdApp = CreateObject("Word.Application")
filepath = "E:\IBM\Temp\" & object.Source 
Call object.ExtractFile(filepath)
Set wordFile = GetObject(filepath , "Word.Document")
wordFile.Application.Visible = False
If wordFile.ProtectionType <> -1 Then
    Print "Document is protected"
Else
    count = wordFile.Paragraphs.Count
    wordFile.Paragraphs(1).Range.Select
    rttext = wordFile.content.text  
End If
Call wordFile.Application.Quit()
Set wrdApp = Nothing 
createobject("scripting.filesystemobject").deletefile(filepath)

如何添加Bootstrap 4 JS以将Modal与VueJS一起使用

1 个答案: