核心概念

在 Vue.js 中，“应用”（Application）是指整个 Vue 项目的一个实例。它是 Vue 应用的基础结构和运行的起点，负责管理和协调所有的组件、状态、路由、和其他功能模块。 一个 Vue 应用通常是由一个 Vue 实例或多个 Vue 实例组成，通过实例化 Vue 对象创建应用。应用实例负责初始化应用的根组件，并提供应用范围内的配置和资源，例如插件、全局状态管理等。

基本结构

一、主文件 main.js或main.ts

  • 应用的入口文件，负责初始化和配置 Vue 应用实例。
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

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

二、根组件 (App.vue)

  • 应用的根组件，通常用作应用的顶层容器，包含应用的基本结构和逻辑。
<!-- App.vue -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
/* 全局样式 */
</style>

三、路由(Router)

  • 定义应用的页面导航和 URL 路径的映射关系。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

四、状态管理(Store)

  • 管理应用的全局状态，可以使用 Vuex 或者其他状态管理库。
// store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default store;

五、组件

  • Vue 应用是由多个组件组成的，组件是应用的基本构建块。

如，一个按钮组件：

<!-- ButtonComponent.vue -->
<template>
  <button @click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('clicked');
    }
  }
};
</script>

<style>
button {
  background-color: blue;
  color: white;
}
</style>

应用生命周期

1、创建：实例初始化、根组件加载

2、挂载：实例挂载在DOM上，渲染根组件

3、更新：数据发生变化，重新渲染组件

4、销毁：示例被销毁，事件监听器和DOM被移除

应用配置

应用可以通过创建实例时传入配置选项进行配置

  • 根组件：使用 render方法指定根组件
createApp({
  render: h => h(App)
});
  • 全局方法和属性：通过 app.config配置全局属性或方法
app.config.globalProperties.$myGlobalMethod = function() { /* ... */ };
  • 插件：使用 app.use注册插件
app.use(myPlugin);

应用示例

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/path/to/main.js"></script>
  </body>
</html>

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

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

<!-- App.vue -->
<template>
  <div id="app">
    <h1>Welcome to My Vue App</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
}
</style>