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

Question

xcuube @xcuube

Vue.js

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

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

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

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

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

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

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

+1 ещё

Средний
Как правильно типизировать vue generic components?
- 2 подписчика
- 17 часов назад
- 58 просмотров
0

ответов
Vue.js

Простой
В какую сторону развивается Vue и есть ли ему современные альтернативы?
- 6 подписчиков
- 20 часов назад
- 1954 просмотра
2

ответа
Vue.js

Средний
Как можно вытащить типы пропсов из определения компонента?
- 1 подписчик
- 15 нояб.
- 86 просмотров
1

ответ
Ubuntu

+2 ещё

Простой
Как запустить VueJs в Docker на Ubuntu 14.04?
- 1 подписчик
- 12 нояб.
- 128 просмотров
2

ответа
Vue.js

Средний
Как использовать компонент vue3-draggable без сборщиков?
- 1 подписчик
- 12 нояб.
- 72 просмотра
1

ответ
Node.js

+2 ещё

Средний
Можно ли вернуть помимо статической страницы данные с сервера?
- 1 подписчик
- 08 нояб.
- 119 просмотров
0

ответов
Vue.js

Простой
Как пробросить модификаторы v-model в кастомный инпут?
- 1 подписчик
- 02 нояб.
- 180 просмотров
2

ответа
Vue.js

Простой
Как можно сделать форматирование и вывод JSON в таблице?
- 1 подписчик
- 31 окт.
- 62 просмотра
2

ответа
Vue.js

Простой
Как выполнить действие до события DomContentLoaded?
- 1 подписчик
- 30 окт.
- 80 просмотров
1

ответ
Vue.js

Простой
Не отображается значение переменной vue?
- 1 подписчик
- 28 окт.
- 79 просмотров
1

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

Frontend Developer (Vue/Nuxt)

tactic.team

от 140 000 до 180 000 ₽

😃 Frontend developer Vue 💻📱⌚️

Viletech • Москва

от 150 000 ₽

Техлид фронтенд-разработки (React и Vue)

Студия 15

от 200 000 до 250 000 ₽

Сверстать десктоп версию сайта в tailwind

22 нояб. 2024, в 06:06

1500 руб./в час

Создать TG бота

22 нояб. 2024, в 06:04

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

Тестирование модуля ElasticSearch через ftp

22 нояб. 2024, в 03:54

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

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

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

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

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

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