在Vue.js中,有没有办法让组件模板不受JavaScript字符串的影响？

我刚刚通过Vue.js网站上的指南,我对组件模板感觉不好.我觉得他们用字符串指定是很奇怪的; 当然,也许这适用于非常短的模板,但是一旦你进入多行模板,你需要开始转义你的新行,并且在javascript字符串中开始使用html 感觉不对.更不用说语法高亮或任何其他好的IDE功能对JS字符串中的HTML都没用.

文档中详述的两个备选方案是使用内联模板或X模板,但不建议使用这两个选项.

唯一的另一种选择似乎是单文件组件,这似乎是一个不错的选择,但它们在高级部分和文档中,据说对于中小型应用程序,只需使用Vue.component就足够了.此外,单个文件组件看起来更难以集成到项目中,需要利用项目的构建系统(文档谈论Webpack和Browserify).

所以我很困惑.我是否只需要接受我的组件代码看起来像这个例子一样混乱,直接从文档中提取？

Vue.component('currency-input', {
  template: '\
    \
      $\
      \
    \
  ',
......

Saurabh.. 9

鉴于您正在开始一个新项目,您可以使用vue-hackernews-2.0作为样板,在那里您可以看到许多组件已经使用webpack集成编码,用于dev和prod env.这也是由核心vue团队开发并在官方文档中推荐的.

您可以看到每个组件都有不同的文件,一个组件看起来像是清楚地分离HTML,JS和CSS部分:

这使用webpack进行构建并添加工作配置,我自己在生产中使用它没有任何问题.

鉴于您正在开始一个新项目,您可以使用vue-hackernews-2.0作为样板,在那里您可以看到许多组件已经使用webpack集成编码,用于dev和prod env.这也是由核心vue团队开发并在官方文档中推荐的.

您可以看到每个组件都有不同的文件,一个组件看起来像是清楚地分离HTML,JS和CSS部分:

这使用webpack进行构建并添加工作配置,我自己在生产中使用它没有任何问题.