Vue — как я могу загрузить файлы CSS и JS в компонент?

Я новичок в Vue и создал компонент панели навигации, который хочу загрузить.

Вот мой код:

компонент.vue

<template>
    <html>
        <head>
        ...
        <link href = "https://fonts.googleapis.com/css?family=Gudea:400,700" rel = "stylesheet">
        <link href = "assets/plugins/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
        <link href = "assets/plugins/font-awesome/css/font-awesome.min.css" rel = "stylesheet">

        <!-- Theme Styles -->
        <link href = "assets/css/flatifytheme.min.css" rel = "stylesheet">
        <link href = "assets/css/custom.css" rel = "stylesheet">
        ...
        </head>
        <body>
         ...
        
         <script src = "assets/plugins/jquery/jquery-3.1.0.min.js"></script>
         <script src = "assets/plugins/bootstrap/js/bootstrap.min.js"></script>
         <script src = "assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
         <script src = "assets/plugins/waves/waves.min.js"></script>
         <script src = "assets/plugins/uniform/js/jquery.uniform.standalone.js"></script>
         <script src = "assets/plugins/switchery/switchery.min.js"></script>
         <script src = "assets/plugins/pace/pace.min.js"></script>
         <script src = "assets/js/flatifytheme.min.js"></script>

        </body>
    </html>
</template>

Каталог assets находится в той же папке, что и компонент.

Теперь проблема в том, что у меня много тегов <link href=''> и <scripts>, которые загружают файлы js и css темы, которую я использую для панели навигации, и я не знаю, куда их поместить в компоненте, поэтому я продолжаю получать следующее ошибка:

This relative module was not found:
* ./components/testComponent in ./src/main.js, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&

Что означает эта ошибка? Как я могу это исправить?

javascript vue.js

24.12.2020 19:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 836

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Используйте @import в теге стиля для импорта CSS-файлов.

@import './assets/plugins/font-awesome/css/font-awesome.min.css'

Также пути к файлам указаны неверно, используйте ./.

./assets/plugins/jquery/jquery-3.1.0.min.js

Спасибо! Итак, в основном ниже </template> я должен добавить <style></style> внутри упомянутого вами импорта? Должен ли я делать это как для тегов ссылки href, так и для тегов script?

— 24.12.2020 20:20

Не беспокойся! Да, Javascript-файлы включены вроде так: stackoverflow.com/questions/55530604/… :)

— 24.12.2020 21:03

24.12.2020 20:00

Есть два способа сделать это:

Либо это глобальные файлы в вашем проекте
- загрузите удаленные файлы (шрифты Google, любые http-файлы) непосредственно в ваш index.html
- загрузите файлы проекта через упаковщик в свой main.js или App.vue
- с import '@/assets/plugins/bootstrap/css/bootstrap.min.css' и так далее...
Или это локальные файлы, которые нужно загружать в определенные компоненты
- загрузите удаленные файлы (шрифты Google или любые http-файлы) с помощью плагина vue-meta, который поможет вам создавать ссылки, сценарии и другие теги HTML на лету в теге заголовка https://vue-meta.nuxtjs.org /api/#ссылка
- загрузите файлы проекта с помощью import '@/path/to/js/file' для файлов JS или для CSS:

<style>
@import '@/path/to/js/file';
</style>

Это очень ясно! большое спасибо за ответ!

— 24.12.2020 22:12

24.12.2020 21:11

Другие вопросы по теме

Uncaught TypeError: не удается прочитать «местоположение» свойства неопределенного vue

Vue: как получить доступ к информации о пользователе из локального хранилища

Что не так с моим компонентом Vue "wheel.vue"? Когда он отображается в html, он выглядит пустым?

Невозможно установить свойство объекта как реактивное в Vue.js

Nuxt.js генерирует и Three.js — SyntaxError: невозможно использовать оператор импорта вне модуля

Общая сумма всех входных значений

Манипуляции с массивами с несколькими условиями — Vue.js/JavaScript

Проблема Vue/Lodash RegExp с результатами, которые содержат ( ) или +

Как получить текст из div при нажатии кнопки в Vue Native?

Использование this в шаблоне Vue внутри блока v-for для динамического извлечения данных на основе переменной цикла

Vue — как я могу загрузить файлы CSS и JS в компонент?

Ответы 2

Другие вопросы по теме

Похожие вопросы