Vue шаблон рендера без всего лишнего

Question

У меня есть очень, очень простой набор компонентов Vue, которые все работают.Это простое дополнение поверх существующего приложения на C #.

На данный момент это файлы .html (занесенные в приложение внутри тегов <script>) и файлы .js, загруженные по ссылке.

Все эти работы очень легкие, и мне это нравится.

Теперь я хочу скомпилировать HTML для каждого компонента в функцию рендеринга Vue, а файлы .js - в один уменьшенный файл .js.

.js в .min.js довольно стандартны, но я не могу понять, как заставить HTML компилироваться в функцию рендеринга Vue.Все, что я нашел, включает в себя ОЧЕНЬ много накладных расходов и запуск веб-сервера , что кажется огромным перерасходом для преобразования html->script, и мне не нужно полностью раскручивать веб-приложение.Мне нужно только, чтобы мои существующие простые шаблоны были преобразованы в нечто более дружественное для производства, чем мои длинные HTML-шаблоны, выгружаемые на страницу.

Я не совсем против превращения .html + .js в .vueфайлы, но только выполнение этого, кажется, не решает мою проблему.

Answer 1

Я не могу понять, как заставить HTML компилироваться в функцию рендеринга Vue

Чтобы сгенерировать функцию рендеринга из строки шаблона Vue (например, прочитать из файла HTML), вы могли бы использовать vue-template-compiler следующим образом:

const compiler = require('vue-template-compiler')
const output = compiler.compile('<div>{{msg}}</div>')
console.log(output) // => { render: "with(this){return _c('div',[_v(_s(msg))])}" }

Все, что я обнаружил, включает в себя МНОГО накладных расходов и запуск веб-сервера, что кажется огромным излишним дляhtml->script transform

Упомянутый вами "веб-сервер" предоставляется Webpack CLI и предназначен для облегчения разработки.Вам не нужно использовать для использования сервера разработки.В статье действительно описываются несколько шагов по ручной настройке проекта для создания однофайловых компонентов Vue, но более простой метод заключается в использовании Vue CLI для автоматической сборки такого проекта.