Вю.JS однофайловые компоненты без процесса сборки

Вю.JS однофайловые компоненты без процесса сборки

27.11.2016 05:36:56 Просмотров 96 Источник

Я люблю вю.js из-за своей простоты, что означает, что я могу взломать быстрый одностраничный спа-центр с современным, интуитивно понятным синтаксисом привязки данных и без сложной цепочки инструментов.

Мне также нравится идея однофайловых компонентов, что означает, что есть одно место ( *.vuefile), где каждый компонент хранит DOM, стиль и скриптовую функциональность.

Однако я хочу использовать однофайловые компоненты, не тратя время на управление процессом сборки каждый раз, когда я собираю приложение Вместе. Короче говоря, я хочу получить преимущества управления компонентами без накладных расходов на сборку toolchain, что означает, что браузер выполняет тяжелую работу по загрузке каждого *.vue-файл через XMLHttpRequestи DOM-рендеринг. Убедившись, что мы заменим module.exportsи importвызовов с соответствующим Vue.component().

Я хотел бы знать, не сталкивался ли кто-нибудь с клиентским (только) решением для использования *.vueфайлы vue в браузере. Неужели это уже было сделано?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/40830113/vue-js-single-file-components-without-a-build-process#comment68879244_40830113
Я его еще не видел. Если вы не хотите тратить время на процесс сборки, вы можете использовать vue-cli github.com/vuejs/vue-cli который заботится обо всем этом для вас.
https://stackoverflow.com/questions/40830113/vue-js-single-file-components-without-a-build-process#comment68880020_40830113
После использования горячей замены модуля я с удовольствием возьму на себя некоторые затраты на сборку/процесс, чтобы повысить свою производительность.
https://stackoverflow.com/questions/40830113/vue-js-single-file-components-without-a-build-process#comment68881024_40830113
Я могу понять, что не хочу настраивать процесс сборки с нуля, но не хочу использовать его вообще-это немного экстремально.
https://stackoverflow.com/questions/40830113/vue-js-single-file-components-without-a-build-process#comment69461077_40830113
Какую бэк-энд технологию вы используете? Я борюсь с точно такими же идеями...
https://stackoverflow.com/questions/40830113/vue-js-single-file-components-without-a-build-process#comment69461556_40830113
Привет @MariuszJamro, дело в том, что я не хочу использовать технологию back-end для сшивания компонентов для меня. Я хочу, чтобы все это происходило в браузере.

Ответы - Вю.JS однофайловые компоненты без процесса сборки / Vue.js single file components WITHOUT a build process

mzgajner

17.04.2017 12:59:52

Я абсолютно уверен, что этого еще не существует, потому что, хотя это может показаться относительно легким, некоторые функциональные возможности сделают его довольно сложным для реализации. Например:

  1. Вы не обязательно импортируете только другие .компоненты vue, вы можете импортировать случайные внешние зависимости. Это означает, что браузер теперь должен загружать и анализировать модули npm, обрабатывать их зависимости и т. д.
  2. Разные ваши разделы .компонент vue (шаблон, логика и стиль) может быть написан на языках, отличных от HTML, JS и CSS. Это означает, что браузер теперь также должен загрузить компилятор / транспайлер для Jade, CoffeeScript, LESS или что-то еще, что вы используете, и запустить свой код через него. Заметьте, нет никакой гарантии, что такой транспайлер, написанный на JavaScript, действительно существует, потому что модуль узла, используемый в обычном процессе сборки, может быть просто оболочкой для какой-то внешней библиотеки, которая не может быть запущена в браузере.
  3. Укладка в а .компонент vue может быть ограничен областью действия, что означает, что теперь вам нужно проанализировать шаблон компонента, чтобы вставить случайно сгенерированные идентификаторы в качестве атрибутов элемента и проанализировать стиль того же компонента, чтобы вставить те же идентификаторы в ваши CSS-селекторы, так что ваш стиль в конечном итоге будет ограничен.

И это только самые очевидные из них с моей головы. Конечно, вы можете сильно ограничить себя и не использовать ни одну из этих функций, но тогда это не совсем так .вю-компонент больше не существует, не так ли?

Если вы действительно хотите избежать процесса сборки любой ценой и готовы принять ограничения, связанные с неиспользованием любой из вышеперечисленных функций, почему бы просто не использовать один js-файл:

$(body).append(`<style>
  // styling goes here
</style>`); 

var myTemplate = `
  // template goes here
`; 

Vue.component('my-component', {
  template: myTemplate
  // component logic goes here
})

Вы должны загрузить их в правильном порядке, но там у вас есть это, единственный файловый компонент бедного человека.

https://stackoverflow.com/questions/40830113/vue-js-single-file-components-without-a-build-process/43442602#comment73946463_43442602
Спасибо @mzgajner, вдумчивый и хорошо выраженный. Рад видеть, что кто-то пытается ответить на вопрос "как", а не "почему". Лично я думаю, что функциональность клиентского загрузчика должна быть такой же обширной, как и серверная сторона, чтобы быть полезной. +1 и пометка как правильный ответ (.. надеюсь, пока не придет лучший ответ).
https://stackoverflow.com/questions/40830113/vue-js-single-file-components-without-a-build-process/43442602#comment73950790_43442602
Спасибо, вы абсолютно правы. Я думаю, что основная причина, по которой подобные вещи не существуют, заключается в том, что мы оптимизируем интерфейсы для маломощных мобильных телефонов, поэтому мы стараемся делать как можно больше во время сборки, где мы не ограничены каким-либо конкретным языком/средой. Следовательно, мы получаем инструменты, которые должны быть переписаны в JS, поэтому проще просто использовать какую-то горячую перезагрузку во время разработки.
https://stackoverflow.com/questions/40830113/vue-js-single-file-components-without-a-build-process/43442602#comment104342525_43442602
Это уже не правильный ответ. Пользователи с +10K, пожалуйста, проголосуйте, чтобы восстановить ответ ниже от @Oscar Gardiazabal с помощью github.com/edgardleal/require-vuejs -спасибо.
LT-Sites

25.12.2019 11:28:46

Другой способ использования: hhtp-vue-loader

Загрузка.Vue файлы непосредственно из вашего html/js. Нет узла.среда js, нет шага сборки.

https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.1/src/httpVueLoader.min.js

То же самое в unpkg cdn

https://unpkg.com/http-vue-loader

Вот такой пример

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>

<script>
new Vue({
  el: '#app',
  components: {
    'header': httpVueLoader('/components/header.vue'),
    'nav-bar': httpVueLoader('/components/navbar.vue'),
    'aside': httpVueLoader('/components/aside.vue'),
    'content': httpVueLoader('/components/content.vue'),
    'footer': httpVueLoader('/components/footer.vue')
  }
});
</script>

Или вы можете загрузить свои компоненты из внешних источников, таких как

'MyHelloWorldComponent': httpVueLoader('https://my-cdn-or.github.io/path/HelloWorld.vue'),

Смотрите пример по адресу : https://codepen.io/mikechen2017/pen/wEdbBN/

Помочь в развитии проекта:
Закрыть X