Форум

razorg1991 · #1 (**permalink**) 23.10.2016, 20:38

Не нашел примеров в документации (гугл тоже не помогает), как подключать темплейты не в коде js?
В документации всегда указывается что-то типа

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

А если я хочу к примеру вынести html в отдельный файл для каждой страницы? Как тогда его использовать в компоненте?

Lemme · #2 (**permalink**) 23.10.2016, 23:24

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <template id="my-component">
    <div>hey</div>
  </template>

  <div id="app">
    <my-component></my-component>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
  <script>
    Vue.component('my-component', {
      template: '#my-component'
    })

    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

razorg1991 · #3 (**permalink**) 24.10.2016, 11:00

Я не совсем правильно задал вопрос. Я хочу использовать vue-router. Каждый темплейт (кусок html) я хочу положить в общую папку на сервере (к примеру pages). По нужному роуту, я хочу грузить/подлючать компонент с логикой (эта часть в принципе понятна), который в свою очередь должен подтянуть темплейт с папки сервера (вот здесь возникают проблемы). Я не хочу растянуть основной html файл до очень больших размеров и описывать в нем сразу все темплейты.

destus · #4 (**permalink**) 24.10.2016, 14:31

Цитата:

который в свою очередь должен подтянуть темплейт с папки сервера (вот здесь возникают проблемы)

вебпак передавал привет

template: require('./path/to/templatefile.html')

razorg1991 · #5 (**permalink**) 24.10.2016, 20:22

Сообщение от Rise

В Vue оказывается даже templateURL нет... пфф, я думал нормальный фреймворк...

Покурив еще документации, понял что в Vue нет понятия template, а есть понятие компонент http://vuejs.org/2015/10/28/why-no-template-url/ соответственно templateURL нет. В принципе философия понятна, субъективное мнение по этому поводу - норм, пойдет.

А вот теперь начинается самое интересное.

http://vuejs.org/guide/single-file-components.html
http://vuejs.org/guide/components.html#Async-Components

Т.е. асинхронно подключать (грузить с сервера) компоненты можно.
И вот тут

Сообщение от destus

вебпак передавал привет

И теперь я понимаю, что достаточно простой Vue, медленно переходит в охренительно сложный webpack!

И прочитав вот это

http://webpack.github.io/docs/code-splitting.html

пока что нифига не понял

Т.е. опять-таки, не могу понять технику асинхронной загрузки компонентов.

destus · #6 (**permalink**) 25.10.2016, 17:35

razorg1991,

Цитата:

И теперь я понимаю, что достаточно простой Vue, медленно переходит в охренительно сложный webpack!

Возьми какой-ниубдь boilerplate и используй https://github.com/vuejs-templates/webpack

ZapevalovAnton · #7 (**permalink**) 20.01.2017, 11:26

Вот хорошая статья о способах работы с шаблонами в Vue.js 2.

Форум

Справочник

Discord чат

Курсы javascript