1. File Structures

Reference

下面我们根据使用 vue build tool 的 project 来看一下我们有哪些重要的 file。

Entry Point

Every Vue application starts by creating a new application instance with the createApp function.

每个 Vue app 都是通过 createApp 来 instantiation 的，我们会 pass in 一个叫做 App 的 component (imported from ./App.vue)

每个 app 都需要有一个 root component，其他的 component 都是 root 的 children。

// main.js
import { createApp } from "vue";
// import the root component App from a single-file component.
import App from "./App.vue";

const app = createApp(App);

2. Mounting the App

只有当 .mount() 方法被调用（如上述示例），app instance 才会开始 render content。

It expects a “container” argument, which can either be an actual DOM element or a selector string.

这个 argument 可以是一个 DOM element，也可以是个 selector string（如 ‘#app’ 是 HTML 里面 define 的一个 div id）。

所有的 content 都会在这个 div 里面 render，div 本身不属于 vue app。

<div id="app"></div>

app.mount("#app");

When to call the .mount() method

只有当所有的 app configs 和 asset registrations 都完成了，再调用 mount，这个 method 返回的是 root component instance，而不是 application instance。

The .mount() method should always be called after all app configurations and asset registrations are done. Also note that its return value, unlike the asset registration methods, is the root component instance instead of the application instance.

3. App Configurations

app instance 会 expose 一个 .config object，这个 object 可以让我们 configure 一些 app-level options，比如一个可以捕获所有 component error 的 app-level error handler：

app.config.errorHandler = (err) => {
  /* handle error */
};

Register app-scoped assets

我们还可以用 app instance 来 register app-scoped assets，比如一个在全局可以使用的 component。

app.component("TodoDeleteButton", TodoDeleteButton);

所有的 application API

Application API | Vue.js (vuejs.org)

4. 一个 page 多个 application

当我们只需要用 vue 控制页面的某个部分时，最好是创建多个 app instance，mount on different elements。

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

const app2 = createApp({
  /* ... */
});
app2.mount("#container-2");

If you are using Vue to enhance server-rendered HTML and only need Vue to control specific parts of a large page, avoid mounting a single Vue application instance on the entire page. Instead, create multiple small application instances and mount them on the elements they are responsible for.