Vue开发PC端多面的步骤详解_project_要变成多页面应用MPA得做一些调整

Vue开发PC端多页面的步骤详解

一、安装Vue CLI

你得确保电脑上装了最新的Node.js和npm。然后，用这个命令全局安装Vue CLI：

npm install -g @vue/cli 

安装完了，用这个命令检查一下是否安装成功：

vue --version 

二、创建Vue项目

用Vue CLI创建一个新项目，输入命令并按照提示操作：

vue create my-project 

进入项目目录：

cd my-project 

三、配置多页面应用

Vue CLI创建的项目默认是单页面应用（SPA）。要变成多页面应用（MPA），得做一些调整。

打开或创建一个名为 vue.config.js 的文件，添加多页面配置：

module.exports = { pages: { index: { entry: 'src/index/main.js', template: 'public/index.html', filename: 'index.html', title: '首页' }, about: { entry: 'src/about/main.js', template: 'public/about.html', filename: 'about.html', title: '关于我们' } } } 

这样，每个页面就有自己独立的入口、模板和标题了。

四、创建多个页面的组件

在每个页面对应的文件夹中创建组件文件。比如，在 src 目录下创建 index 和 about 文件夹，然后在每个文件夹里创建组件：

• src/index/index.vue
• src/about/about.vue

五、路由配置

在每个页面的 main.js 文件中配置路由：

import Vue from 'vue' import VueRouter from 'vue-router' import Index from './index.vue' import About from './about.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Index }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) new Vue({ router }).$mount('#app') 

六、打包和部署

配置完成，用这个命令打包项目：

npm run build 

打包完成后，会在项目根目录下生成多个页面文件，部署时只需要把文件上传到服务器即可。

用Vue开发PC端多页面应用主要就是这几个步骤：安装Vue CLI、创建Vue项目、配置多页面应用、创建组件、配置路由和打包部署。每个页面都有自己的入口、模板和路由，适用于需要多个独立页面的Web应用开发。