在一个典型的 Vue 单页面应用（SPA）中，我们可以通过 Vue Router 进行路由管理，通过 Vuex 实现全局状态管理，并通过 Axios 进行异步 API 请求。以下是一个完整的 SPA 实战项目的示例，涵盖 Vue 的核心功能，包括路由、Vuex、Axios 和组件化开发。
项目结构
/src
/assets # 静态资源
/components # 公共组件
/store # Vuex store
/views # 路由视图组件
/router # 路由配置
/api # API 请求
App.vue # 主应用组件
main.js # 入口文件
步骤 1：创建项目
首先，使用 Vue CLI 创建一个新项目。
vue create vue-spa-example
选择默认的配置或手动配置 Vue Router 和 Vuex。
步骤 2：配置 Vue Router
在 /src/router/index.js 中配置路由，包含首页（Home）和用户详情页（UserDetail）。
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';
import UserDetail from '@/views/UserDetail.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/user/:id', name: 'UserDetail', component: UserDetail }
];
const router = new VueRouter({
mode: 'history', // 使用 HTML5 History 模式
routes
});
export default router;
步骤 3：配置 Vuex
在 /src/store/index.js 中创建 Vuex store，用于管理全局状态（如用户列表）。
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
users: [], // 用户列表
userDetail: {} // 当前选中的用户详情
},
mutations: {
SET_USERS(state, users) {
state.users = users;
},
SET_USER_DETAIL(state, userDetail) {
state.userDetail = userDetail;
}
},
actions: {
fetchUsers({ commit }) {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
commit('SET_USERS', response.data);
});
},
fetchUserDetail({ commit }, userId) {
axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`)
.then(response => {
commit('SET_USER_DETAIL', response.data);
});
}
}
});
步骤 4：创建 API 模块
在 /src/api/index.js 中创建 Axios 实例和 API 请求函数。
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 10000
});
export function getUsers() {
return apiClient.get('/users');
}
export function getUserDetail(id) {
return apiClient.get(`/users/${id}`);
}
步骤 5：创建 Home 视图
在 /src/views/Home.vue 中创建一个用户列表页面，通过 Vuex 获取用户数据，并展示在页面上。
<template>
<div>
<h1>User List</h1>
<ul>
<li v-for="user in users" :key="user.id">
<router-link :to="{ name: 'UserDetail', params: { id: user.id } }">
{{ user.name }}
</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
users() {
return this.$store.state.users;
}
},
created() {
this.$store.dispatch('fetchUsers'); // 获取用户列表
}
};
</script>
步骤 6：创建 UserDetail 视图
在 /src/views/UserDetail.vue 中创建一个用户详情页面，通过 Vuex 获取用户的详细信息，并展示出来。
<template>
<div v-if="user">
<h2>User Details</h2>
<p><strong>Name:</strong> {{ user.name }}</p>
<p><strong>Email:</strong> {{ user.email }}</p>
<p><strong>Phone:</strong> {{ user.phone }}</p>
<router-link to="/">Back to user list</router-link>
</div>
</template>
<script>
export default {
computed: {
user() {
return this.$store.state.userDetail;
}
},
created() {
const userId = this.$route.params.id;
this.$store.dispatch('fetchUserDetail', userId); // 获取用户详情
}
};
</script>
步骤 7：主应用组件
在 /src/App.vue 中设置基本布局和路由出口。
<template>
<div id="app">
<router-view></router-view> <!-- 路由出口 -->
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
步骤 8：入口文件
在 /src/main.js 中挂载 Vue 实例，并引入路由和 Vuex store。
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
步骤 9：项目运行
通过以下命令启动开发服务器：
npm run serve
浏览器中打开 http://localhost:8080，你将看到一个用户列表。点击用户名称将跳转到用户详情页面，展示详细的用户信息。
完整功能解释
- Vue Router：我们使用了 Vue Router 来管理应用的不同页面（首页和用户详情页）。通过动态路由（
/user/:id），可以为每个用户生成一个唯一的 URL。 - Vuex：我们使用 Vuex 来存储全局的用户数据。
state存储了用户列表和用户详情，actions通过 Axios 请求数据，并通过mutations修改状态。 - Axios：Axios 用于与后端 API 进行交互。我们通过 Axios 请求用户列表和用户详情，并将这些数据存储在 Vuex 中。
- 组件化开发：用户列表和用户详情页是独立的组件，这些组件通过 Vue Router 路由进行切换，同时它们都共享 Vuex 中的全局状态。
项目扩展
你可以进一步扩展这个项目，添加以下功能：
- 表单提交：在用户详情页中增加一个表单，用于编辑和保存用户信息。
- 权限控制：通过 Vue Router 的导航守卫来添加路由访问的权限控制。
- 分页和搜索：在用户列表中增加分页和搜索功能，使其更加实用。
- 错误处理：使用 Axios 拦截器或 Vuex 捕获 API 请求的错误，并在页面中显示友好的错误信息。
通过这种 SPA 项目，你可以全面掌握 Vue 的各个核心功能，同时能够进行更复杂的 Vue 应用开发。