Как вынести vue в отдельный файл?

Question

xcuube @xcuube

Vue.js

Как вынести vue в отдельный файл?

Есть Html файл, в теге script у него следующий код:

Каким образом можно вынести его в отдельный .js файл?

Пробовал переносить в файл вроде script.js и потом включать его в html через
<script src="./js/script.js"></script>
но ничего не вышло

Подскажите, пожалуйста.

Вопрос задан более трёх лет назад
586 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Пригласить эксперта

Ответы на вопрос 1

2 комментария

xcuube @xcuube Автор вопроса

Мой index.html сейчас:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>title</title>
    
    <link rel="stylesheet" href="./css/styles.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<div class="container-fluid">
    <div id="app">        
    </div>
</div>

<script src="./js/vue.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

</body>
</html>

<script>

var pjson = require('./package.json');
const puppeteer = require('puppeteer');
const Datastore = require('nedb');
var gui = require('nw.gui');
let path = require("path");
let hddserial = require('hddserial');
var request = require('request');

    let app = new Vue({
        el: '#app',
...
    });
</script>

Пробовал переносить весь js код в отдельный файл и добавлять в index.html это
<script src="./js/script.js"></script>

Я не использовал webpack и build

Написано более трёх лет назад

Михаил @Nolan81

xcuube, вам придется использовать webpack чтобы такие вещи как require заработали. Это не браузерный яваскрипт.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

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

Vue.js

Средний
Как отрисовать дочерние slots в родительском компоненте?
- 1 подписчик
- 18 дек.
- 97 просмотров
1

ответ
Vue.js

+1 ещё

Простой
Чем так страшен верхне-уровненый await в script setup?
- 1 подписчик
- 18 дек.
- 122 просмотра
1

ответ
Vue.js

+1 ещё

Простой
Прошу помочь исправить одну ошибку (1 строчка кода) при сборке проекта Vue 3?
- 2 подписчика
- 17 дек.
- 196 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как дебажить telegram mini app?
- 1 подписчик
- 15 дек.
- 212 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Telegram web app, как открыть нативный попап с полем ввода (promt)?
- 1 подписчик
- 10 дек.
- 139 просмотров
1

ответ
Java

+2 ещё

Средний
Как в общих чертах реализовать фоновую загрузку файлов?
- 1 подписчик
- 09 дек.
- 170 просмотров
0

ответов
Vue.js

+2 ещё

Средний
Прошу помочь определиться, что выбрать nuxt или inertia для laravel + vue.js?
- 2 подписчика
- 08 дек.
- 623 просмотра
2

ответа
JavaScript

+4 ещё

Простой
Как решить проблемы с линтингом в Vue 3 + TypeScript?
- 1 подписчик
- 06 дек.
- 92 просмотра
0

ответов
Vue.js

+1 ещё

Средний
Как отобразить множество компонентов vue внутри blade шаблона?
- 1 подписчик
- 04 дек.
- 101 просмотр
2

ответа
CSS

+1 ещё

Простой
CSS snake эффект, как реализовать?
- 1 подписчик
- 01 дек.
- 188 просмотров
1

ответ
Показать ещё Загружается…

Frontend разработчик (Vue)

Creatium

от 150 000 ₽

Fullstack-разработчик (Vue 3, TypeScript, Firebase)

Onemoney

от 180 000 до 180 000 ₽

Фулстек разработчик

Creative Code

от 2 500 до 3 000 $

Разработать дизайн сайта дома культуры

23 дек. 2024, в 15:12

15000 руб./за проект

Юзабилити-тестирование сайта с мобильного — 24.12.2024 в 15:00 по МСК

23 дек. 2024, в 14:57

300 руб./за проект

Сделать js-модуль для Тильды

23 дек. 2024, в 14:47

4500 руб./за проект

но ничего не вышло

А должна была выйти черепаха?
Тут есть пример как вынести js в отдельный файл, но это касается только компонентов vue - для разделения js, html и css:
https://ru.vuejs.org/v2/guide/single-file-componen...

Answer 1 · 2020-07-14 19:13:02

1) Почитайте https://cli.vuejs.org/ru/config/
2) После команды build вы получаете готовый набор скриптов.
3) Почитаете про DOM объекты. В вашем примере el: '#app' говорит о том что надо запускать приложение в <div id=app></div> в вашем html файле

Пробовал переносить в файл вроде script.js и потом включать его в html

Напишете как вы это делали )))
а vue.js подключали?

Как вынести vue в отдельный файл?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт