Vue 應用的入口點：createApp()

語法

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.mount('#app');

說明

  • createApp(App)：建立一個 Vue 應用，並使用 App.vue 作為根元件。
  • .mount('#app')：將 Vue 應用掛載到 HTML 中具有 id="app" 的元素上。

注意：Vue 3 不再使用 Vue 2 中的 new Vue({...}) 語法，請確保使用新的 createApp API。

註冊全域元件

import MyComponent from './components/MyComponent.vue';

app.component('MyComponent', MyComponent);

app.component 可用來註冊全域元件，在整個應用中任何地方都可以使用 <MyComponent />。

使用 Vue Router

import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

app.use(router);

Vue Router 是 Vue 官方提供的路由解決方案，Vue 3 搭配的版本為 Vue Router 4。需要先透過 app.use(router) 註冊到應用上。

官方文件：Vue Router 4 官方說明

使用 Pinia（Vue 3 的狀態管理）

import { createPinia } from 'pinia';

const pinia = createPinia();
app.use(pinia);

Pinia 是 Vue 3 推薦的全新狀態管理方案，取代 Vuex，與 Composition API 整合更好，支援模組化、型別推導等特性。

官方文件：Pinia 官方說明

常見初始化項目整理

可以在 main.js（或 main.ts）中加入以下初始化邏輯：

const app = createApp(App);

// 註冊插件或元件
app.use(router);
app.use(pinia);
app.component('MyComponent', MyComponent);

// 掛載應用
app.mount('#app');

相關參考