Matarialize中文社区-Vue单页面应用

Vue单页面应用

前端初学者 2024-09-12 11:50:07

262 Vue 专栏

在一个典型的 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 中的全局状态。