Vue 初始化笔记

Vue.js 初始化

要初始化 Vue.js，您需要在 HTML 页面中包含 Vue.js 库。您可以从 Vue.js 网站下载库，也可以使用 CDN。

<script src="https://unpkg.com/vue@next"></script>

接下来，您需要创建一个 Vue 实例。Vue 实例是一个 Vue 应用程序的根组件。您可以通过调用 Vue.createApp() 方法来创建 Vue 实例。

const app = Vue.createApp({});

最后，您需要将 Vue 实例挂载到 DOM。您可以通过调用 app.mount() 方法来做到这一点。

app.mount('#app');

Vue.js 文件结构

Vue.js 应用程序通常由以下几个文件组成：

• main.js：这是 Vue.js 应用程序的入口文件。它包含了创建 Vue 实例和挂载 Vue 实例的代码。
• App.vue：这是 Vue.js 应用程序的根组件。它包含了应用程序的模板和逻辑。
• components 目录：此目录包含应用程序的组件。组件是 Vue.js 应用程序的可重用部分。
• pages 目录：此目录包含应用程序的页面。页面是 Vue.js 应用程序的不同视图。
• router.js：此文件包含应用程序的路由配置。路由允许您在应用程序的不同页面之间导航。
• store.js：此文件包含应用程序的状态管理代码。状态管理允许您在应用程序的不同组件之间共享数据。

Vue.js 组件

Vue.js 组件是 Vue.js 应用程序的可重用部分。组件可以包含模板、逻辑和样式。您可以通过调用 Vue.component() 方法来注册组件。

Vue.component('my-component', {
  template: '<p>This is a component.</p>'
});

然后，您可以在 Vue 实例的模板中使用组件。

<my-component></my-component>

Vue.js 路由

Vue.js 路由允许您在应用程序的不同页面之间导航。您可以通过使用 VueRouter 库来实现路由。

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

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

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

然后，您可以在 Vue 实例中使用 router 对象。

const app = Vue.createApp({});
app.use(router);
app.mount('#app');

Vuex

Vuex 是一个状态管理库，允许您在应用程序的不同组件之间共享数据。您可以通过使用 Vuex 库来实现状态管理。

import { createStore } from 'vuex';

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

然后，您可以在 Vue 实例中使用 store 对象。

const app = Vue.createApp({});
app.use(store);
app.mount('#app');

总结

Vue.js 是一个功能强大且易于使用的框架，可以帮助您构建出色的用户界面。本文档只是介绍了 Vue.js 的一些基础知识。有关更多信息，请参阅 Vue.js 文档。