创建一个简单的单页应用（SPA）

npm install -g @vue/cli
vue create vue-spa
cd vue-spa

npm install vue-router pinia axios

src/
├── api/
│   └── api.js
├── components/
│   ├── Home.vue
│   └── About.vue
├── store/
│   └── store.js
├── router/
│   └── index.js
└── App.vue

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com', // 示例 API
  timeout: 5000,
});

export default api;

import { defineStore } from 'pinia';
import api from '../api/api';

export const useMainStore = defineStore('main', {
  state: () => ({
    posts: [],
  }),
  actions: {
    async fetchPosts() {
      const response = await api.get('/posts');
      this.posts = response.data;
    },
  },
});

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

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

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

export default router;

<template>
  <div>
    <h1>首页</h1>
    <button @click="loadPosts">加载帖子</button>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useMainStore } from '../store/store';

const store = useMainStore();
const posts = ref([]);

const loadPosts = async () => {
  await store.fetchPosts();
  posts.value = store.posts;
};
</script>

<template>
  <div>
    <h1>关于页面</h1>
    <p>这是一个简单的单页应用。</p>
  </div>
</template>

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view />
  </div>
</template>

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';

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

npm run serve