Можно ли использовать импорт компонент если Vue.js подключен к лендингу через скрипт?

Question

[anriko]

и подскажите где можно найти сверстанные лендинги на Vue.js, для примера

Answer 1

[Andrey Vasilev]

только вот так:

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">Счётчик кликов — {{ count }}</button>'
})

В теории можно, но есть ли смысл? будет не то же самое что и в сли

Comments

[anriko]

Andrey Vasilev,то есть все должно быть в одном файле? весь js и представление? и разделить страницу на компоненты не получиться?

[Andrey Vasilev]

anriko, получится разделить страницу на джс файлы, можно отдельно всё выносить как и прежде, но компонентный подход нормально можно использовать только в CLI. Насколько мне известно, если кто-то подскажет как это сделать без CLI, причем удобно и всяких затупов - будет круто!

[anriko]

Andrey Vasilev, потом хочется запустить лендос на хостинге ,что для этого понадобиться? чтобы без всяких компеляций каждый раз и можно файлы билд сделать человекочитаемыми чтобы , вслучае потерии исходников править билд?

[be_a_man]

anriko, если вы без Webpack не получится. Кто-то должен собирать компоненты в понятный для браузера код.
И почему не взять Nuxt? Можно статику по итогу получить, для ленда самое оно

[be_a_man]

anriko, человекочитаемый билд это html и css, забудьте про Vue, вы не понимаете инструмент.

[anriko]

be_a_man,так зачем вебпак если ,ноды хватает и vue cli,чтобы сбилдить? и зачем тогда они дали возможность подключать vue без веб окружения по ссылке?

[Константин Б.]

be_a_man, это же лендос, он потом до усрачки будет подгонять pagespeed по 100%
В Nuxt это можно сделать, но если не знать как, то жопа подгорит

[anriko]

Константин Б., а почему долго подгонять его под pagespeed .на оборот должен рендеринг быстро произойти?
а jquery тоже не чистый js ,тоже много лишнего подключаем

[be_a_man]

Константин Б., а без SSR время до первой отрисовки какое будет? А это самый главный фактор на ленде.

[be_a_man]

anriko, а Vue Cli не на вебпаке построен?)
Без окружения по ссылке чтобы вы могли не все приложения писать на Vue, а какую-то его часть, например.

[Константин Б.]

anriko, be_a_man, потому что по дефолту Nuxt пихает в тело страницы кучу данных из ваших компонентов, несет стили внутри страницы, а не кеширует их и много чего еще

[anriko]

be_a_man,
Без окружения по ссылке чтобы вы могли не все приложения писать на Vue, а какую-то его часть, например.
так почему этот вариант не подходит для лендинга?

[be_a_man]

anriko, потому-что вы хотите компоненты, а без сборщика в компоненты не получится

Answer 2

[Константин Б.]

О божечки. Зачем на лендинге юзать Vue, если вы не умеете им пользоваться?

Ну допустим я вам отвечу как, дальше станет легче или мы увидим следующий вопрос а как в Vue?

import Vue from 'vue'
import Calc from './Calc.vue'

new Vue({
  render: h => h(Calc)
}).$mount('#calc')

Comments

[Andrey Vasilev]

так он и юзает no-CLI версию. правда много хочет и для ленда реально перебор

[anriko]

Константин Б.,ну вот учусь, а легче проект поднять с беком ?
и зачем тогда они дали возможность подключать vue без веб окружения по ссылке ?

[Константин Б.]

anriko, возможности есть у Vue разные. Но ими нужно хорошо уметь пользоваться
Если вы хотите использовать Vue просто чтобы анимировать лендинг, то это так себе идея

[anriko]

Константин Б., ну вообще хочу обойтись без jquery , так как vue ,как мне кажется более современный инструмент,и даже некоторые цмс начали на него преходить

[be_a_man]

anriko, для ленда не нужен не вью не жквери. Учите js нативный