使用 webpack 在 vuejs 中分离模板

Posted 2023-02-23

【中文标题】使用 webpack 在 vuejs 中分离模板

【英文标题】：Separate templates in vuejs, using webpack

【发布时间】：2016-04-22 21:42:37

【问题描述】：

我对 VueJS 很感兴趣。我已经看过有关为每个组件定义资源的文档，但我宁愿在我的开发环境中将模板文件与 js 文件分开。

我正在使用 Webpack，所以我认为应该可以将这些单独的资源编译在一起以便在运行时使用。

有没有人成功配置 Webpack 来做到这一点？我尝试使用文本加载器从我的 js 文件中要求 html 模板，但随后范围内的 css 被忽略了。 也可以选择分离 css。对于这种方法，文档似乎更喜欢 Browserify。

【参考方案1】：

您可以使用 src 属性将组件拆分为多个文件。

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>

Documentation

【讨论】：

太棒了，这很简单。谢谢。