Как правильно импортировать множество скриптов и стилей внешнего интерфейса в проект Vue CLI? - PullRequest
Новая
       24

Как правильно импортировать множество скриптов и стилей внешнего интерфейса в проект Vue CLI?

0 голосов
/ 04 августа 2020

Я создаю проект Vue, используя Vue CLI, и мне нужно использовать какую-то тему bootstrap HTML (требование клиента ...)

Мой вопрос: , как правильно импортировать эти скрипты и стили внешнего интерфейса? Пока я думаю, что у меня есть работающие стили (ну, у меня нет ошибок компиляции, но я еще не видел рендеринга внешнего интерфейса из-за ошибок JS, которые я объясню через секунду). Я создал папку vendor внутри src со всеми скриптами и стилями, которые находятся в файле HTML темы. Вот как я импортирую стили: 

<template lang="pug">
  div.wrapper
    div
      nav
        .....
</template>
<style lang="scss">
@import url('./vendor/css/bootstrap.min.css');
@import url('./vendor/css/plugins/......./something.css');
// A bunch more CSS imports down here...
</style>

Что касается JS, я создал файл с именем vendor.ts и импортирую его в свой main.ts: 

import Vue from 'vue'
import App from './App.vue'
import './vendor'

new Vue({...}).$mount('#app')

Внутри файла vendor.ts у меня просто куча операторов import с точными файлами из темы HTML. 

import './vendor/js/jquery-3.1.1.min.js'
import './vendor/js/popper.min.js'
import './vendor/js/bootstrap.min.js'
import './vendor/js/plugins/metisMenu/jquery.metisMenu.js'
import './vendor/js/plugins/slimscroll/jquery.slimscroll.min.js'

Я понимаю, что есть пакет NPM для jQuery среди прочего, но я, по сути, пытаюсь дословно скопировать настройку, которая работает в файле stati c HTML, в этот Vue проект. Если бы мне когда-нибудь понадобилось jQuery в реальном шаблоне, я бы использовал какой-то импорт с пакетом NPM. Но пока я просто хочу, чтобы все стандартные пассивные функции темы работали.

Это ошибки, которые я получаю при попытке npm run serve

These dependencies were not found:

* jquery in ./src/vendor/js/bootstrap.min.js, ./src/vendor/js/plugins/jquery-ui/jquery-ui.min.js and 3 others
* pace in ./src/vendor/js/plugins/pace/pace.min.js
* popper.js in ./src/vendor/js/bootstrap.min.js

Я пытался установить эти 3 как фактические пакеты NPM, которые фактически позволяли компилировать приложение, но затем каждый отдельный скрипт на интерфейсе вызывал ошибки, такие как jQuery is not defined et c. et c.

Итак, как правильно импортировать такие файлы stati c, только для внешнего интерфейса JS? Должен ли я делать это в index.html? Согласно документации Vue CLI «Когда использовать папку publi c» Я думаю, что это может быть единственный вариант.

Заранее благодарю вас за совет!

...