Creating a Vue Application

The introduction

This article mainly introduces how to create an APP instance in Vue, APP instance mount principle and her configuration, two also introduces the page can mount multiple APP instances, can complement interference, for the novice is to understand Vue3 necessary knowledge.

The original address: blog.duhbb.com/2022/02/11/…

Welcome to my blog: blog.duhbb.com/

The application instance

Each Vue project starts with the createApp function creating an Application instance:

import { createApp } from 'vue'

const app = createApp({
  /* root component options */
})
Copy the code

So: what is this app, and what logic does createApp perform?

Root Component

What we pass into createApp is actually a component. Every app needs a “root component” and uses it to contain other components as its babies.

If you’re using a single-file Component, just import the root Component from another File:

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)
Copy the code

Although only a single component is needed to demonstrate this in this document, in real projects these components are organized into a tree structure as reusable components.

For example, a Todo application component might look like this:

├─ ├─ bass Exercises, ├─ bass Exercises, exercises, exercises, exercises, exercises, exercises, exercises TodoClearButton └ ─ TodoStatisticsCopy the code

We’ll explain how to define components and organize them later, but before we do, let’s focus on individual components.

Mount the App

An application instance does not render anything until her.mount method is called. The mount method takes a container as an argument, either an actual DOM element or a selector.

<div id="app"></div>
Copy the code

app.mount('#app')
Copy the code

The contents of the root node of the app will be rendered in the container, and the container itself will not be included in the app.

The HTML container provides a place to mount, and Vue comes into play here.

The root component template in the Dom

Instead of using the build step, we can write component templates directly in the container to be hung in.

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>
Copy the code

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')
Copy the code

Vue automatically uses the innerHTML of the container as the template if the root component does not contain the template.

App configuration

Application Instance exposes a.config object in which we can perform some application-level configuration, such as defining an app-level error handler to catch exceptions for all child components.

app.config.errorHandler = (err) = > {
  /* handle error */
}
Copy the code

Application Instance can also provide methods to register application-level components, for example, to register a component:

app.component('TodoDeleteButton', TodoDeleteButton)
Copy the code

In that case, this component can be used anywhere in our app.

We will cover component registration later.

We can query more apis in the API Reference.

Note: for the configuration to take effect, it must take effect before the app is mounted, after which it will not take effect.

Multiple Application instances

The createApp API allows multiple Vue instances to coexist on a page, each with its own scope and global component.

Tell me it’s not sharp! I did not play understand, you let me make a few!! WTF.

const app1 = createApp({
  / *... * /
})
app1.mount('#container-1')

const app2 = createApp({
  / *... * /
})
app2.mount('#container-2')
Copy the code

If you only need Vue to enhance server-side HTML rendering and only want local control, don’t mount the Vue instance on the entire page.

You can create multiple small application instances and then mount them in their respective places.

conclusion