Matarialize中文社区-Vue多页面应用（MPA）实战项目

Vue多页面应用（MPA）实战项目

前端初学者 2024-09-12 11:52:56

392 Vue 专栏

在多页面应用（MPA）中，每个页面有各自的 HTML 文件、JavaScript 文件和路由配置。每个页面独立加载，减少了初次加载的时间，适用于较大项目。相比单页面应用（SPA），MPA 的复杂度稍高，但更有利于 SEO 和页面性能优化。

下面我们将使用 Vue.js 实现一个完整的多页面应用示例，包含以下功能：

路由管理
Vuex 状态管理
Axios 请求
各个页面独立打包
Webpack 或 Vite 进行多页面打包配置

项目结构

/src
  /pages
    /home
      Home.vue
      main.js
    /about
      About.vue
      main.js
  /components  # 公共组件
  /store       # Vuex store
  /router      # 路由配置
  /api         # API 请求
  /assets      # 静态资源
/vue.config.js # Vue CLI 配置文件

步骤 1：创建项目

首先，使用 Vue CLI 创建项目，并手动选择配置，确保选中了 Vue Router 和 Vuex：

vue create vue-mpa-example

选择 Manually select features，并确保启用了 Vue Router 和 Vuex。

步骤 2：配置多页面应用结构

在 /src 目录下创建多个页面文件夹，如 home 和 about。每个页面文件夹内都包含各自的 .vue 文件和 main.js 文件。

Home 页面结构

在 /src/pages/home/Home.vue 中创建首页视图：

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

在 /src/pages/home/main.js 中配置入口文件：

import Vue from 'vue';
import Home from './Home.vue';
import router from '@/router/home';
import store from '@/store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(Home)
}).$mount('#app');

About 页面结构

在 /src/pages/about/About.vue 中创建关于页面：

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page.</p>
    <router-link to="/">Go to Home Page</router-link>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

在 /src/pages/about/main.js 中配置入口文件：

import Vue from 'vue';
import About from './About.vue';
import router from '@/router/about';
import store from '@/store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(About)
}).$mount('#app');

步骤 3：配置路由

为每个页面设置独立的路由文件，在 /src/router/home.js 中配置首页路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/pages/home/Home.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

在 /src/router/about.js 中配置关于页面路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import About from '@/pages/about/About.vue';

Vue.use(VueRouter);

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

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

步骤 4：配置 Vuex

为了在所有页面中共享状态，Vuex store 依旧是全局的。创建 /src/store/index.js 文件：

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: 'Hello from Vuex!',
    users: []
  },
  mutations: {
    SET_USERS(state, users) {
      state.users = users;
    }
  },
  actions: {
    fetchUsers({ commit }) {
      axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          commit('SET_USERS', response.data);
        });
    }
  }
});

步骤 5：配置 Webpack 多页面打包

在 /vue.config.js 中添加多页面配置：

module.exports = {
  pages: {
    home: {
      entry: 'src/pages/home/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: 'Home Page'
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'public/index.html',
      filename: 'about/index.html',
      title: 'About Page'
    }
  },
  configureWebpack: {
    // 配置代理，处理跨域
    devServer: {
      proxy: {
        '/api': {
          target: 'https://jsonplaceholder.typicode.com',
          changeOrigin: true
        }
      }
    }
  }
};

pages: 指定多个入口文件。entry 为每个页面的主入口文件，filename 指定打包后的文件名，template 使用相同的 HTML 模板。
devServer.proxy: 配置代理解决跨域问题。

步骤 6：创建 API 模块

在 /src/api/index.js 中配置 API 请求函数，使用 Axios 发送请求。

import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/api',
  timeout: 10000
});

export function getUsers() {
  return apiClient.get('/users');
}

步骤 7：使用 Axios 和 Vuex 在 Home.vue 页面中展示数据

修改 /src/pages/home/Home.vue，通过 Vuex 获取用户列表并展示：

<template>
  <div>
    <h1>Home Page</h1>
    <p>{{ message }}</p>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    },
    users() {
      return this.$store.state.users;
    }
  },
  created() {
    this.$store.dispatch('fetchUsers');
  }
};
</script>