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

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

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
})

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

Другой способ использования: 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/