Vue 模板渲染没有所有额外的答案

【问题标题】：Vue template render without all the extraVue 模板渲染没有所有额外的
【发布时间】：2019-09-24 10:20:11
【问题描述】：

我有一组非常非常简单的 Vue 组件，它们都可以工作。这些是在现有 C# 应用程序之上的简单添加。

目前，这些是 .html 文件（在 <script> 标签内引入应用程序）和通过引用加载的 .js 文件。

这些都有效，重量很轻，我喜欢它。

现在我想将每个组件的 HTML 编译成一个 Vue 渲染函数，并将 .js 编译成一个缩小的 .js 文件。

.js 到 .min.js 非常标准，但我不知道如何将 HTML 编译到 Vue 渲染函数中。我发现的所有内容都涉及大量开销和running a web server，这对于html->script 转换来说似乎是一个巨大的过度杀伤力，而且我不需要启动一个完整的Web 应用程序。我只需要将现有的简单模板转换为比我的长格式 html 模板转储到页面更适合生产的东西。

我并不完全反对将 .html+.js 转换为 .vue 文件，但只是这样做似乎并不能解决我的问题。

【问题讨论】：

你会完全反对使用 webpack 来完成这项工作吗？ webpack.js.org
@Adriano 我不反对使用 webpack，npm/webpack 可能是某种解决方案，但是“大”vue webpack 包太过分了——除非我对如何使用它们有误.
如果你真的需要在墙上钉钉子，有时你需要的只是一把锤子。

标签： vue.js vuejs2

【解决方案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 转换来说似乎是一个巨大的过度杀伤

您提到的“网络服务器”由Webpack CLI 提供，旨在促进开发。您不需要使用开发服务器。文章确实介绍了手动搭建项目搭建Vue单文件组件的几个步骤，不过更简单的方法是使用Vue CLI自动搭建这样的项目。

【讨论】：