В Vue.js существует ли способ сохранить шаблоны компонентов из строк JavaScript?

Я просто работал через руководство на веб-сайте Vue.js, и у меня плохое представление о шаблонах для компонентов. Мне кажется странным, что они указаны в строках; конечно, возможно, это работает для очень коротких шаблонов, но как только вы переходите к многострочным шаблонам, вам нужно начать экранировать ваши новые строки, и он просто чувствует себя неправильно, чтобы начать с html в строках javascript. Не говоря уже о том, что подсветка синтаксиса или любые другие приятные функции IDE бесполезны для HTML в JS-строках.

Две альтернативы, которые подробно описаны в документах, используются встроенными шаблонами или X-templates, но обе эти опции не рекомендуется.

Единственной альтернативой, по-видимому, является Single File Components, которая выглядит как хороший вариант, но они находятся в разделе Дополнительно и в документах говорится, что для малых и средних приложений просто использовать Vue.component должно быть достаточно. Кроме того, компоненты с одним файлом выглядят так, как будто их сложнее интегрировать в проект, требуя нажатия в систему построения проекта (в документах говорится о Webpack и Browserify).

Так что я смущен. Мне просто нужно признать, что мой код компонента будет выглядеть грязным, как этот пример, вытащил прямо из документов?

Vue.component('currency-input', {
  template: '\
    <span>\
      $\
      <input\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
      >\
    </span>\
  ',
......

ОТВЕТЫ

Ответ 1

Учитывая, что вы запускаете новый проект, вы можете использовать vue-hackernews-2.0 в качестве шаблона, где вы видите много компонентов, уже закодированных с помощью интеграция веб-пакетов для обоих разработчиков и prod env. Это также разработано командой core vue и рекомендовано в официальных документах.

Вы можете видеть, что разные файлы для каждого компонента, а один компонент выглядит следующим образом: четкое разделение HTML, JS и CSS-части:

<template>
  <li v-if="comment" class="comment">
    <div class="by">
      <router-link :to="'/user/' + comment.by">{{ comment.by }}</router-link>
      {{ comment.time | timeAgo }} ago
    </div>
    <div class="text" v-html="comment.text"></div>
    <div class="toggle" :class="{ open }" v-if="comment.kids && comment.kids.length">
      <a @click="open = !open">{{
        open
            ? '[-]'
            : '[+] ' + pluralize(comment.kids.length) + ' collapsed'
      }}</a>
    </div>
    <ul class="comment-children" v-show="open">
      <comment v-for="id in comment.kids" :id="id"></comment>
    </ul>
  </li>
</template>

<script>
export default {
  name: 'comment',
  props: ['id'],
  data () {
    return {
      open: true
    }
  },
  computed: {
    comment () {
      return this.$store.state.items[this.id]
    }
  },
  methods: {
    pluralize: n => n + (n === 1 ? ' reply' : ' replies')
  }
}
</script>

<style lang="stylus">
.comment-children
  .comment-children
    margin-left 1.5em
.comment
  border-top 1px solid #eee
  position relative
  .by, .text, .toggle
    font-size .9em
    margin 1em 0
  .by
    color #999
    a
      color #999
      text-decoration underline
  .text
    overflow-wrap break-word
    a:hover
      color #ff6600
    pre
      white-space pre-wrap
  .toggle
    background-color #fffbf2
    padding .3em .5em
    border-radius 4px
    a
      color #999
      cursor pointer
    &.open
      padding 0
      background-color transparent
      margin-bottom -0.5em
</style>

Это использует webpack для сборки и добавляет рабочий config, который я сам использую в производстве без каких-либо проблем.

Ответ 2

Вы можете использовать <template>...</template> или <script type="text/x-template">...</script>, и указать для него селектор в template.

<template id="myComponent">
  <div>
    <h1>Hello!</h1>
    <p><slot></slot></p>
  </div>
</template>


Vue.component('myComponent', {
  template: '#myComponent'
})

Простой рабочий пример здесь: http://codepen.io/anon/pen/dNWrZG?editors=1010

Кроме того, процесс сборки отдельных компонентов файлов не так уж и трудный. Вы можете проверить шаблон webpack-simple: https://github.com/vuejs-templates/webpack-simple, vue-loader сделает все для вас.

Как только вы почувствуете себя комфортно с помощью webpack, вы можете взглянуть на полный шаблон веб-пакета: https://github.com/vuejs-templates/webpack

Ответ 3

Из моего опыта, если шаблон очень короткий, используйте встроенный режим в порядке. Если нет, x-template также позволяет вам избавиться от разрывов строк. Я не понимаю, почему вы считаете, что эти подходы обескуражены. Можете ли вы предоставить дополнительную информацию?

Однако, если вы настаиваете на встраивании длинного шаблона в строку, вы все равно можете сделать это без выхода. Ответ: ES6 литералы шаблона - строка, заключенная в ``:

template: `
  <span>
    $
    <input
      ref="input"
      v-bind:value="value"
      v-on:input="updateValue($event.target.value)"
    >
  </span>
`,

С другой стороны, я действительно думаю, что vue-cli - отличный инструмент. Webpack - это то, чему стоит учиться.

Ответ 4

На самом деле это не прямой ответ (это специальный редактор), но я просто подумал, что должен делиться, но если вы используете Visual Studio Code в качестве своего редактора, то вы можете сохранить свои шаблоны как часть своего компонента и все равно получить Выделение синтаксиса.

Благодаря этому удивительному расширению angular -2-inline

Первоначально он предназначался для Angular 2, но он работает для всех шаблонов шаблонов ES6 ( При условии, что ключом шаблона String является "шаблон" ).

Компоненты единого файла являются рекомендуемым способом, но они могут стать бременем, когда вы не создаете полноценный SPA, и вы просто используете Vue для улучшения некоторых HTML-шаблонов. Здесь и там, и вы не хотите для участия в Webpack.

Не верьте? Я использую его сейчас.

введите описание изображения здесь