At the beginning of learning Vue, we do not recommend using the vue-cli command-line tool to create projects. A simpler way is to directly introduce the vue.global.js file on the page to test the learning process.

The application in Vue3 is created by using the createApp function, with the following syntax format:

const app = Vue.createApp({ /* option */ })

The options passed to createApp are used to configure the root component. When using mount() to mount an application, this component is used as the starting point for rendering.

A simple example:

Vue.createApp(HelloVueApp).mount('#hello-vue')

createApp is the root component (HelloVueApp), which is the starting point for rendering when the application is mounted.

An application needs to be mounted into a DOM element. The above code uses mount (’# hello-vue’) to apply the Vue HelloVueApp mount to < div id= “hello-vue” > < / div >.

Next, let’s start with Hello Vue!! start learning the code.

<divid="hello-vue"class="demo">{{ message }}</div>​<script>const
HelloVueApp = { data() { return { message: 'Hello Vue!!' } } } ​
Vue.createApp(HelloVueApp).mount('#hello-vue')</script>