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

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

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

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

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

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

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

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

 $(body).append(`{amp}lt;style{amp}gt; // styling goes here {amp}lt;/style{amp}gt;`); var myTemplate = ` // template goes here `; Vue.component('my-component', { template: myTemplate // component logic goes here }) 

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

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

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

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

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

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

Вот пример

 {amp}lt;script src="https://unpkg.com/vue"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://unpkg.com/http-vue-loader"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; 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') } }); {amp}lt;/script{amp}gt; 

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

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

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