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

Question

xcuube @xcuube

Vue.js

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

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

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

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

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

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

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 заработали. Это не браузерный яваскрипт.

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

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

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

Войти через центр авторизации

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

JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 11 часов назад
- 27 просмотров
0

ответов
Vue.js

Простой
Из-за чего может добавлять слеш в url?
- 1 подписчик
- вчера
- 49 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 22 апр.
- 71 просмотр
1

ответ
Vue.js

Средний
Какие существуют способы отреагировать на удаление элемента из массива, который передается как пропс в другие компоненты?
- 1 подписчик
- 22 апр.
- 40 просмотров
1

ответ
Vue.js

Простой
Как получить событие клика в updated()?
- 1 подписчик
- 19 апр.
- 44 просмотра
1

ответ
Vue.js

+1 ещё

Средний
Как использовать хуки NUXT в модулях?
- 1 подписчик
- 19 апр.
- 60 просмотров
1

ответ
Vue.js

Простой
Как решить проблему с логикой валидации после перезагрузки страницы в Vue.js?
- 1 подписчик
- 19 апр.
- 51 просмотр
1

ответ
Vue.js

Средний
Как сделать светлую тему по дефолту во Vueform?
- 1 подписчик
- 18 апр.
- 63 просмотра
2

ответа
Vue.js

Средний
Как разрешить пути к SVG во Vue-проекте?
- 1 подписчик
- 18 апр.
- 66 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 18 апр.
- 111 просмотров
0

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

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Frontend developer (middle/senior)

//stablecode

от 210 000 ₽

Senior Frontend VueJS (частичная занятость)

Онград+

от 125 000 ₽

Написать индикатор на TradingView по хаям/лоям дня недели

25 апр. 2024, в 08:45

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

Вычислить размер объекта по карте глубин

25 апр. 2024, в 07:37

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

Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL

25 апр. 2024, в 05:57

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

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

А должна была выйти черепаха?
Тут есть пример как вынести 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 в отдельный файл?

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

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

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