Vue3 + Vite + Vue Router + Vuex：打造现代 Web 应用

2024-01-30 22:40:39

构建现代化 Web 应用程序：使用 Vue3、Vite、Vue Router 和 Vuex

在如今的技术领域，构建现代化、功能强大的 Web 应用程序至关重要。为了满足这一需求，出现了各种前沿的 JavaScript 框架和工具，包括 Vue3、Vite、Vue Router 和 Vuex。为了帮助您充分利用这些工具，本指南将引导您完成构建现代 Web 应用程序的每一步，让您体验这些工具的魅力。

Vue3：更快的速度，更简洁的语法

Vue3 是 Vue.js 的最新版本，它为 Web 开发带来了重大改进。凭借更快的运行速度、更好的开发体验和更简洁的语法，它显著提升了效率。

Vite：轻量级，快速构建

Vite 是一款轻量级的构建工具，可以极大地提升构建速度。开箱即用的支持让您可以专注于开发，而无需在构建配置上浪费时间。

Vue Router：轻松导航

Vue Router 是一个路由库，用于处理应用程序中的页面导航。它提供了一种简单且高效的方式在不同页面之间切换，让用户体验更流畅。

Vuex：共享状态管理

Vuex 是一个状态管理库，用于维护应用程序中的共享状态。它提供了一种集中且可预测的方式管理数据，简化了复杂应用程序的状态管理。

构建您的第一个 Vue3 应用程序

现在，让我们使用 create-vite-app 脚手架工具构建一个简单的 Vue3 应用程序。

使用以下命令创建一个新的项目目录：

npx create-vite-app my-app

安装依赖项

进入项目目录，安装依赖项：

cd my-app
npm install

运行开发服务器

启动开发服务器：

npm run dev

访问应用程序

在浏览器中访问以下地址查看应用程序：

http://localhost:3000

创建组件

组件是 Vue.js 应用程序的基本构建块。要创建组件，请在 components 目录中创建一个 .vue 文件。例如，创建名为 HelloWorld.vue 的组件：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

<style>
</style>

使用组件

要使用组件，需要将其注册到 Vue 实例中。在 main.js 文件中，找到 components 对象，并添加 HelloWorld 组件：

import HelloWorld from './components/HelloWorld.vue'

const app = Vue.createApp({
  components: {
    HelloWorld
  }
})

app.mount('#app')

使用 Vue Router

Vue Router 用于处理页面导航。在 main.js 文件中，配置路由表：

import VueRouter from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: HelloWorld
    }
  ]
})

const app = Vue.createApp({
  components: {
    HelloWorld
  }
})

app.use(router)
app.mount('#app')

使用 Vuex

Vuex 用于管理共享状态。在 main.js 文件中，创建一个 Vuex 实例：

import Vuex from 'vuex'

const store = new Vuex.Store({
  modules: {
    counter: {
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      }
    }
  }
})

const app = Vue.createApp({
  components: {
    HelloWorld
  }
})

app.use(store)
app.mount('#app')