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





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

17.04.2017 12:59:52
Я абсолютно уверен, что этого еще не существует, потому что, хотя это может показаться относительно легким, некоторые функциональные возможности сделают его довольно сложным для реализации. Например:
- Вы не обязательно импортируете только другие .компоненты vue, вы можете импортировать случайные внешние зависимости. Это означает, что браузер теперь должен загружать и анализировать модули npm, обрабатывать их зависимости и т. д.
- Разные ваши разделы .компонент vue (шаблон, логика и стиль) может быть написан на языках, отличных от HTML, JS и CSS. Это означает, что браузер теперь также должен загрузить компилятор / транспайлер для Jade, CoffeeScript, LESS или что-то еще, что вы используете, и запустить свой код через него. Заметьте, нет никакой гарантии, что такой транспайлер, написанный на JavaScript, действительно существует, потому что модуль узла, используемый в обычном процессе сборки, может быть просто оболочкой для какой-то внешней библиотеки, которая не может быть запущена в браузере.
- Укладка в а .компонент 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
})
Вы должны загрузить их в правильном порядке, но там у вас есть это, единственный файловый компонент бедного человека.



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/