Как начать работать во Vue? Где писать код?

Question

[boga-net]

Здравствуйте. Я учусь и я запутан. Учусь по разным туториалам и так получается, что какая-то часть материала у одного автора с одним подходом (подключением), другая - у другого, с другим подходом. Нашёл, допустим, несколько уроков, посмотрел, а дальше либо начались какие-то дебри, либо уроки кончились. Иду к другому автору - там всё по-другому. Кто-то пишет на codepen, кто-то с webpack и компонетнами, кто-то в index.html. На самом деле этот ступор у меня уже достаточно давно, и непонимание принципа работы с vue (где, чёрт подери, писать..) и этих разных подходов - демотивирует. Но только сейчас решился создать вопрос: было как-то неловко, и считал, что разберусь сам. И вот я здесь

Одни авторы используют классический подход - подключение скрипта Vue с CDN в html страницу - это не интересует. Создаю проект с помощью npm и vue init webpack-simple. И вот здесь уже запутался.

Не могу разобраться, где и что писать.

- у меня есть файл index.html в папке с проектом. Там див с id APP - туда всё будет рендериться.

- есть файл main.js в папке src с

new Vue({
  el: '#app',
  render: h => h(App)
})

. Как я понял, там я должен буду подключать и регистрировать новые компоненты. И new Vue в main.js не трогать.

- Есть и App.vue с

export default {
data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

Сюда, как я понял, выводят компоненты, если это нужно.

Я хочу поучиться/потыкать/попрактиковаться. Где мне писать, если мне не нужно создавать новые компоненты ? Где начать издеваться над

new Vue ({ })

data: {}.
methods: {}

и т.д. Такой, казалось бы, простой вопрос, но это уже давно является камнем преткновения и каждый раз откладываю изучение Vue. Приходится "тыкать" на codepen. Но как только хочу создать проект, чтобы с webpack, чтобы всё чин чином, так сразу бросаю. Помогите разобраться. Заранее спасибо.

Answer 1

[Антон Швец]

Вы ж сами все написали.
main.js - начальная точка. Здесь создается экземляр Vue и регистрируется корневой компонент App.vue. В main.js вы можете добавлять глобальные компоненты Vue.component({}), которые нужно объявить до основного экземпляра Vue. Глобальные компоненты пригодны для быстрых проверок, но в основном оперируют дочерними.
Так же, в main.js импортируются и подключаются плагины, которые тоже нужно установить в конструктор Vue до создания экземляра.

В App.vue у вас корневой компонент (разметка и код). Импортируются компоненты в файлах своих родителей (там же, где вы их указываете в блоке components).

И не надо никаких разных туториалов и уроков, официальной документации вполне достаточно.

Comments

[boga-net]

Антон

Да, но я уточнил, что мне не нужно создавать компоненты. Я хочу просто попрактиковаться и пока что не хочу усложнять. Пока что просто в одном файле, как в классических примерах. Попробовать все эти простые штуки с v-for, click и т.д.

В последнем видео, которое я смотрю, у автора есть index.html с подключением Vue через CDN и файл main.js - здесь всё просто и с этим проблем нет. Он указывает в js файле

const app = new Vue ({
el: '#app',
template: ``
и т.д.

и это сразу рендерится в див #app. Когда я хочу то же самое повторить, но уже с установленным Vue через npm - я попросту теряюсь и не знаю, где это писать ) В каком из этих трёх файлов. Я экспериментировал и пробовал во всех, но вскоре понял, что что-то делаю не так. Хочу всё таки разобраться, что к чему и для чего, где что писать и уже учиться не с подключённым Vue в index.html

Пробуя то же самое в App.vue (код, который выше) - ничего не рендерится. И тут уже я не понимаю разницу (не могу переписать то, что написано ( в видео уроке ) в классическом примере), потому что не ведаю, что куда. Спасибо за понимание

[Антон Швец]

boga-net,

Да, но я уточнил, что мне не нужно создавать компоненты. Я хочу просто попрактиковаться и пока что не хочу усложнять. Пока что просто в одном файле, как в классических примерах. Попробовать все эти простые штуки с v-for, click и т.д.

я ответил

В App.vue у вас корневой компонент (разметка и код)

const app = new Vue ({
el: '#app',
template: ``
и т.д.

- это не надо писать в App.vue, оно уже написано в main.js.
Просто создайте разметку, ваши v-for,

[boga-net]

Антон к тому же я уже не понимаю, нужно ли писать код в export default или нет. Ну и у нас есть два дива с id="app" в файле index.html и в файле app.vue - это тоже путает

Значит в main.js сам код не писать, правильно понимаю ? Или всё же лучше создать отдельный компонент, подклчюить, зарегистрировать его и писать в нём?

[boga-net]

Антон,

я ответил

В App.vue у вас корневой компонент (разметка и код)

Простите, не так понял. Значит писать в app.vue и всё, как обычно, и , получается, внутри export default ?

[Антон Швец]

boga-net, export default это объект данного компонента. Тут data, ваши методы и прочее.
В index.html div#app должен быть один, и это все, что должен содержать index.html. Больше никакой разметки.

В файле app.vue помещать div#app не обязательно (если он вам не нужен). Там может быть просто
<template><div>Helloworld</div></template>

Суть в том, что div#app в index.html будет заменент содержимым template App.vue. Поэтому div#app и появляется второй раз, просто чтобы он попал в итоговую разметку.

Отдельный компонент создавать не обязательно, для тренировки вам хватит App.vue
Повторяю, vue-cli уже создал все необходимое.

[boga-net]

Антон,

И не надо никаких разных туториалов и уроков, официальной документации вполне достаточно.

Да вот наткнулся на видео урок Дмитрия Лаврика и он показал подключение с помощью npm (чего я раньше избегал)) и поняв силу вебпака, уже хочу учиться осваивать Vue таким образом

Тут ещё сложность заклчюается в том, что разные автора не уточняют этот момент и приходится самому как-то додумывать

[Антон Швец]

boga-net,

Значит писать в app.vue и всё, как обычно, и , получается, внутри export default ?

Внутри export default объект вашего компонента. Аналогично Vue.component({}), только темплейт у вас в отдельном теге.

[boga-net]

Антон, Вот простой пример:

обычный html документ.

подключаю скрипт -

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

создаю контейнет - <div id="app"></div>

Пишу код:

Vue.component('friend', {
  props: ['friend'],
  filters: {
    fullName(name) {
      return `${name.first} ${name.last}`;
    }
  },
  methods: {
    decrementAge(friend) {
      return friend.age -= 1;
    },
    incrementAge(friend) {
      return friend.age += 1;
    }
  },
  template: `
    <div>
      <h3>{{ friend.age }}</h3>
      <input v-model="friend.first" />
      <input v-model="friend.last" />
      <button v-on:click="decrementAge(friend)"> - </button>
      <button v-on:click="incrementAge(friend)"> + </button>
    </div>
  `
});

const app = new Vue({
  el: '#app',
  data: {
    friends: [
      {
        first: 'Bobby',
        last: 'Down',
        age: 25
      },
      {
        first: 'John',
        last: 'Dowson',
        age: 38
      }
    ]
  },
  template: `
    <div class="center">
      <friend v-for="friend in friends" v-bind:friend="friend"/>
    </div>
  `
})

всё работает.

Тоже самое вставляю в App.vue в тег script - Vue is not defined.

Что я делаю не так ?

[Антон Швец]

boga-net,

Vue.component('friend', {
  props: ['friend'],
  filters: {
    fullName(name) {
      return `${name.first} ${name.last}`;
    }
  },
  methods: {
    decrementAge(friend) {
      return friend.age -= 1;
    },
    incrementAge(friend) {
      return friend.age += 1;
    }
  },
  template: `
    <div>
      <h3>{{ friend.age }}</h3>
      <input v-model="friend.first" />
      <input v-model="friend.last" />
      <button v-on:click="decrementAge(friend)"> - </button>
      <button v-on:click="incrementAge(friend)"> + </button>
    </div>
  `
});

это в main.js. Я писал про глобальные компоненты выше.

--------------------------------

data: {
    friends: [
      {
        first: 'Bobby',
        last: 'Down',
        age: 25
      },
      {
        first: 'John',
        last: 'Dowson',
        age: 38
      }
    ]
},

это в export default {}

-------------------------------------

<div class="center">
      <friend v-for="friend in friends" v-bind:friend="friend"/>
    </div>

это в <template></template> в App.vue

[Антон Швец]

boga-net,

Тоже самое вставляю в App.vue в тег script - Vue is not defined.

Разумеется, в App.vue нет никакого Vue. Вы там описывается только просто javascript объект и экспортируете его в main.js
А уже там render: h => h(App) - Vue знает, что делать с такими объектами.

[boga-net]

Антон, Большое вам спасибо за потраченное время. Начинаю понимать логику. В том и заключалась сложность, что никто этого не объяснил, и всё писали код без разделения, как в вашем комментарии. И не представляю, как новичку разобраться в этом и понять, что и куда.

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

export default {
  name: 'app',
  data () {
    return {
      friends: [
        {
          first: 'Bobby',
          last: 'Down',
          age: 25
        },
        {
          first: 'John',
          last: 'Dowson',
          age: 38
        }
      ]
    }
  }
}

Ещё раз большое спасибо, что потратили время и объяснили