How to get started with Vue? Where to write code?

Question

Vue.js

Hello. I'm learning and I'm confused. I learn from different tutorials and it turns out that some part of the material is from one author with one approach (connection), the other is from another, with a different approach. I found, let's say, a few lessons, looked, and then either some wilds began, or the lessons ended. I go to another author - everything is different there. Someone writes on codepen, someone with webpack and components, someone in index.html. In fact, I have had this stupor for quite a long time, and not understanding the principle of working with vue (where the hell to write ..) and these different approaches is demotivating. But only now I decided to create a question: it was somehow awkward, and I thought that I would figure it out myself. And here I am
Some authors use the classic approach - connecting a Vue script from a CDN to an html page - this is not of interest. I create a project with npm and vue init webpack-simple. And here is where I got confused.
I can not figure out where and what to write.
- I have an index.html file in my project folder. There divs with APP id - everything will be rendered there.
- there is a main.js file in the src folder with

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

. As I understand it, there I will have to connect and register new components. And don't touch new Vue in main.js.
- There is also App.vue with

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

Here, as I understand it, components are displayed, if necessary.
I want to learn/poke/practice. Where should I write if I don't need to create new components? Where to start mocking

new Vue ({ })

data: {}.
methods: {}

etc. Such a seemingly simple question, but this has long been a stumbling block and every time I put off learning Vue. You have to "poke" on the codepen. But as soon as I want to create a project, so that with webpack, so that everything is in order, I immediately quit. Help me to understand. Thanks in advance.

Answer 1

You yourself wrote everything.
main.js is the starting point. This creates a Vue instance and registers the App.vue root component. In main.js , you can add global Vue.component({}) components that need to be declared before the main Vue instance. Global components are suitable for quick checks, but mostly operate on children.
Also, plugins are imported and connected to main.js, which also need to be installed in the Vue constructor before creating an instance.
In App.vue you have the root component (markup and code). Components are imported in the files of their parents (in the same place where you specify them in the components block).
And you don’t need any different tutorials and lessons, the official documentation is quite enough.