Vue多页面应用(MPA)实战项目

class 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 目录下创建多个页面文件夹,如 homeabout。每个页面文件夹内都包含各自的 .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>

步骤 8:运行项目

运行以下命令启动项目:

npm run serve

此时,你可以在浏览器中访问:

  • http://localhost:8080/ 查看首页
  • http://localhost:8080/about 查看关于页面

多页面应用的特点

  • 页面独立加载:每个页面有独立的路由、入口文件和组件,用户访问时只加载当前页面所需的资源,减少了初次加载的时间。
  • 路由管理:通过 Vue Router 管理不同页面的路由,每个页面有独立的路由配置。
  • 全局状态管理:即便是多页面应用,Vuex 依然可以全局管理应用的状态,确保不同页面之间可以共享数据。
  • Axios 请求:通过 Axios 与后端进行异步请求,使用 Vuex 管理请求结果,方便在页面中进行展示。

总结

这个多页面应用项目展示了如何在 Vue 中构建一个简单的 MPA 应用,并集成了路由管理、Vuex 状态管理和 Axios 请求。通过 Webpack 或 Vite 的多页面打包配置,应用的每个页面都能独立运行,适用于较大项目的多页面需求。

你可以根据需要进一步扩展这个项目,添加如表单处理、用户认证、分页等功能。

评论区
评论列表
menu