Блог

Главная - Вопросы по программированию - Создание приложения Vue и использование начальной загрузки без включения в сборку

Создание приложения Vue и использование начальной загрузки без включения в сборку

#jquery #twitter-bootstrap #vue.js

Вопрос:

Сейчас я учусь создавать приложение Vue, и у меня возникли некоторые проблемы с загрузкой и Jquery

На веб-сайте, на котором будет развернуто приложение, уже будут загружены Bootstrap и Jquery как часть сайта, и я только собираюсь добавить это новое приложение Vue в раздел сайта.

Я немного подумал об этом, но большинство предложений состоит в том, чтобы включить Bootstrap-Vue в мою сборку Vue. Я не хочу этого делать, если мне не придется, с тех пор я снова включу Bootstrap на сайте.

Есть ли способ создать мое приложение Vue и скомпилировать его, чтобы оно не выдавало ошибку при компиляции?

Прямо сейчас я могу просто включить файл начальной загрузки css, js и jquery в index.html, но как только я использую Jquery, он не будет создаваться, потому что я, например, не включил его в проект :

 $(".modal").modal("show")

Ответ №1:

Я думаю, нашел способ.

В vue.config.js (создайте, если такового нет) файл, добавьте следующее

 module.exports = {
    //...
    configureWebpack: {
            externals: {
        jquery: 'jQuery',
        }
    }
  };

И в компоненте, использующем Jquery, добавьте и импортируйте

 import $ from 'jquery';

В вашем public/index.html файл добавить скрипт

 <!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    
    <div id="app"></div>
      
    <!-- built files will be auto injected -->
    <script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"
></script>
  </body>
</html>
Метки: