Vue 3、Vuex 和 Vue Router 都是 Vue.js 生态系统中非常有用的库。它们各自在 Vue.js 应用程序中扮演着重要的角色：Vue 3 是核心框架，Vuex 用于状态管理，而 Vue Router 用于路由管理。下面是如何在 Vue 3 项目中使用这些库的简要说明。

创建Vue 3 项目

首先，我们需要创建一个新的 Vue 3 项目。我们可以使用 Vue CLI 或 Vite 来做到这一点。这里以 Vite 为例：

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install

安装 Vuex 和 Vue Router

在你的 Vue 3 项目中，你可以使用 npm 或 yarn 来安装 Vuex 和 Vue Router。

npm install vuex@next vue-router@4

使用 Vuex 进行状态管理

1、创建 Vuex Store

在 src 目录下创建一个 store 目录，并在其中创建一个 index.js 文件。

// src/store/index.js
import { createStore } from 'vuex'

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

export default store

2、在 Vue 应用中使用 Vuex

在你的主文件（通常是 main.js 或 main.ts）中，你需要导入并使用 Vuex store。

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

const app = createApp(App)

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

3、在组件中使用 Vuex

现在你可以在 Vue 组件中通过 this.$store 访问 Vuex store，或者使用 mapState 和 mapMutations 辅助函数来更简洁地访问状态和提交变更。

使用 Vue Router 进行路由管理

1、创建 Vue Router 实例

在 src 目录下创建一个 router 目录，并在其中创建一个 index.js 文件。

// src/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

2、在 Vue 应用中使用 Vue Router

同样，在你的主文件中，你需要导入并使用 Vue Router。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

const app = createApp(App)

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

3、在组件中使用 Vue Router

现在你可以在 Vue 组件中使用 和 来创建导航和显示当前路由的组件。你也可以在组件的方法中使用 this.$router 来编程式地导航到不同的路由。

这只是一个基本的入门指南。Vuex 和 Vue Router 都提供了许多高级功能和选项，接下来的学习中，会陆续使用到。