Vue CLI 3.x 是 Vue.js 官方提供的一款强大的脚手架工具，它极大地简化了 Vue.js 应用的初始化和构建过程。在 Vue CLI 3 中，不仅支持单页面应用（SPA）的构建，还内置了对多页面应用（MPA）的支持，这使得开发者能够更高效地管理多个独立的入口页面。下面我们将详细讨论 Vue CLI 3 中如何配置和使用多页面应用。
1. **创建项目**
确保已经全局安装了 Vue CLI 3。如果还没有安装，可以通过以下命令进行安装：
```
npm install -g @vue/cli
```
然后，创建一个新的 Vue 项目，并选择一个预设或者手动配置：
```
vue create my-project
```
2. **配置多页面应用**
在项目根目录下，打开 `vue.config.js` 文件（如果没有，创建一个）。这个文件用于自定义 Vue CLI 的配置。在该文件中，我们可以配置 `pages` 属性来定义多个入口页面：
```javascript
module.exports = {
pages: {
index: {
entry: 'src/pages/index/main.js', // 入口文件
template: 'public/index.html', // 模板文件
filename: 'index.html', // 输出文件名
},
about: {
entry: 'src/pages/about/main.js',
template: 'public/about.html',
filename: 'about.html',
}
}
}
```
在这个例子中，我们定义了两个页面：`index` 和 `about`，每个页面有自己的入口文件、模板文件和输出文件名。
3. **目录结构**
根据上面的配置，`src/pages` 目录下应有对应的子目录，例如 `src/pages/index` 和 `src/pages/about`，分别包含各自的 `main.js` 文件。同时，`public` 目录下应有对应的 HTML 模板文件。
4. **路由管理**
在多页面应用中，每个页面通常有自己的路由管理。你可以为每个页面设置独立的路由，或者在全局路由文件中根据页面名称动态配置。例如，在 `src/router/index.js` 中，你可以这样配置：
```javascript
import Vue from 'vue'
import Router from 'vue-router'
const routes = [
{ path: '/', component: () => import('@/pages/index') },
{ path: '/about', component: () => import('@/pages/about') },
]
export default new Router({
routes
})
```
5. **运行与构建**
现在，你可以通过以下命令启动开发服务器或构建项目：
```
npm run serve // 开发模式
npm run build // 生产模式
```
Vue CLI 会根据 `vue.config.js` 中的配置自动处理多页面应用的构建。
6. **其他配置**
除了多页面配置外，Vue CLI 3 还提供了许多其他功能，如 CSS 预处理器支持、代码分割、热模块替换等。你可以根据项目需求在 `vue.config.js` 中进一步定制这些配置。
总结，Vue CLI 3 提供的多页面应用配置使得开发和管理多个入口页面变得简单。只需几步简单的配置，你就可以享受到高效开发的便利。对于想要学习和使用 Vue CLI 3 构建多页面应用的开发者来说，这是一个非常友好的特性。
2025-07-03 14:53:19
124KB
1
微信付款码支付java
应用场景：收银员使用扫码设备读取微信用户付款码以后，二维码或条码信息会传送至商户收银台，由商户收银台或者商户后台调用该接口发起支付。
涉及知识点：xml的解析生成，MD5签名，https的访问
有demo和教学文档，学起来更简单
2023-03-19 15:25:26
4.59MB
1
课程礼包\
00【发刊词】基金是最适合普通人的投资方式.pdf
01【第1课】为什么基金比股票更靠谱？.pdf
02【第2课】很多基金基本都不会亏钱，比如余额宝.pdf
03【第3课】买基金和谈恋爱一样.pdf
04【第4课】一招轻松选到赚钱好基金.pdf
05【第5课】买基金其实和网购一样简单.pdf
06【第6课】股神也推荐的基金究竟好在哪里？.pdf
07【第7课】这些费用，买基金10年的人也未必知道.pdf
08【第8课】买基金前，先给基金做一个全面体检.pdf
09【第9课】1块钱的基金真的比3块钱便宜么.pdf
10【第10课】基金公司给你打钱，真的是你赚了么.pdf
11【第11课】会买的是徒弟，会卖的才是师傅.pdf
12【第12课】如果基金公司倒了，我的钱还在么？.pdf
13【第13课】买基金为什么不能一把梭？.pdf
14【第14课】做对这件事，成为朋友圈最赚钱的人.pdf
15【第15课】3个万能组合，让你躺着赚钱.pdf
16 【第16课】最适合上班族的懒人投资法.pdf
17 【第17课】每年看一次，投资赚更多.pdf
18 【第18课】一天卖300亿的基金
2022-11-24 09:17:48
960B
1
查询增强版（Power Query）是一个Excel插件，是Power BI的一个组件。
Power Query 在Excel中通过简化数据发现、访问和合作的操作，从而增强了商业智能自助服务体验.
2022-06-28 21:03:57
52KB
1
温馨提示：文档需要Typora软件阅读。
Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为比较流行的Web 应用服务器。
Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP 程序的首选。对于一个初学者来说，可以这样认为，当在一台机器上配置好Apache 服务器，可利用它响应HTML（标准通用标记语言下的一个应用）页面的访问请求。实际上Tomcat是Apache 服务器的扩展，但运行时它是独立运行的，所以当你运行tomcat 时，它实际上作为一个与Apache 独立的进程单独运行的。
2022-05-12 18:01:41
54KB
解决你日常剪辑重遇到的常见问题解决方法，首先从剪映基础操作开始讲起，其次包括音乐文字的常见技巧添加、视频封面制作教程，以及在刷视频的时候会有特别好玩的特效但有些同学不知道怎么制作出了，这里老师会教大家常见的短视频特效制作方法，还有我们特别重要的剪辑流程，很多同学剪辑视频特别浪费时间，不知道从那一步开始那一步结束中间很多重复的操作甚至到最后剪辑看着自己都没有信心了，所以本套课程会有一些剪辑流程包括真人口述的剪辑流程和vlog形式的剪辑流程帮助大家提升自己的剪辑效率。
视频大小：4G
2022-04-11 11:04:59
341B