首页 / VUE / Vue CLI3基础学习之pages构建多页应用

Vue CLI3基础学习之pages构建多页应用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue CLI3基础学习之pages构建多页应用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8741字，纯文字阅读大概需要13分钟。

内容图文

前言

首先我们可以把多页应用理解为由多个单页构成的应用，而何谓多个单页呢？其实你可以把一个单页看成是一个 html 文件，那么多个单页便是多个 html 文件，多页应用便是由多个 html 组成的应用，如下图所示

Vue CLI3基础学习之pages构建多页应用 - 文章图片

既然多页应用拥有多个 html ，那么同样其应该拥有多个独立的入口文件、组件、路由、 vuex 等。没错，说简单一点就是多页应用的每个单页都可以拥有单页应用 src 目录下的文件及功能，我们来看一下一个基础多页应用的目录结构

├── node_modules               # 项目依赖包目录
├── build                      # 项目 webpack 功能目录
├── config                     # 项目配置项文件夹
├── src                        # 前端资源目录
│   ├── images                 # 图片目录
│   ├── components             # 公共组件目录
│   ├── pages                  # 页面目录
│   │   ├── page1              # page1 目录
│   │   │   ├── components     # page1 组件目录
│   │   │   ├── router         # page1 路由目录
│   │   │   ├── views          # page1 页面目录
│   │   │   ├── page1.html     # page1 html 模板
│   │   │   ├── page1.vue      # page1 vue 配置文件
│   │   │   └── page1.js       # page1 入口文件
│   │   ├── page2              # page2 目录
│   │   └── index              # index 目录
│   ├── common                 # 公共方法目录
│   └── store                  # 状态管理 store 目录
├── .gitignore                 # git 忽略文件
├── .env                       # 全局环境配置文件
├── .env.dev                   # 开发环境配置文件
├── .postcssrc.js              # postcss 配置文件
├── babel.config.js            # babel 配置文件
├── package.json               # 包管理文件
├── vue.config.js              # CLI 配置文件
└── yarn.lock                  # yarn 依赖信息文件

二、多入口

在单页应用中，我们的入口文件只有一个， CLI 默认配置的是 main.js ，但是到了多页应用，我们的入口文件便包含了 page1.js 、 page2.js 、 index.js 等，数量取决于 pages 文件夹下目录的个数，这时候为了项目的可拓展性，我们需要自动计算入口文件的数量并解析路径配置到 webpack 中的 entry 属性上，如：

module.exports = {
 ...
 
 entry: {
  page1: '/xxx/pages/page1/page1.js',
  page2: '/xxx/pages/page2/page2.js',
  index: '/xxx/pages/index/index.js',
 },
 
 ...
}

那么我们如何读取并解析这样的路径呢，这里就需要使用工具和函数来解决了。我们可以在根目录新建 build 文件夹存放 utils.js 这样共用的 webpack 功能性文件，并加入多入口读取解析方法

/* utils.js */
const path = require('path');

// glob 是 webpack 安装时依赖的一个第三方模块，该模块允许你使用 * 等符号,
// 例如 lib/*.js 就是获取 lib 文件夹下的所有 js 后缀名的文件
const glob = require('glob');

// 取得相应的页面路径，因为之前的配置，所以是 src 文件夹下的 pages 文件夹
const PAGE_PATH = path.resolve(__dirname, '../src/pages');

/* 
* 多入口配置
* 通过 glob 模块读取 pages 文件夹下的所有对应文件夹下的 js * 后缀文件，如果该文件存在
* 那么就作为入口处理
*/
exports.getEntries = () => {
 let entryFiles = glob.sync(PAGE_PATH + '/*/*.js') // 同步读取所有入口文件
 let map = {}
 
 // 遍历所有入口文件
 entryFiles.forEach(filePath => {
  // 获取文件名
  let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
  
  // 以键值对的形式存储
  map[filename] = filePath 
 })
 
 return map
}

Vue CLI3基础学习之pages构建多页应用 - 文章图片

读取并存储完毕后，我们得到了一个入口文件的对象集合，这个对象我们便可以将其设置到 webpack 的 entry 属性上，这里我们需要修改 vue.config.js 的配置来间接修改 webpack 的值

/* vue.config.js */

const utils = require('./build/utils')

module.exports = {
 ...
 
 configureWebpack: config => {
  config.entry = utils.getEntries()
 },
 
 ...
}

这样我们多入口的设置便完成了，当然这并不是 CLI 所希望的操作，后面我们会进行改进。

三、多模板

相对于多入口来说，多模板的配置也是大同小异，这里所说的模板便是每个 page 下的 html 模板文件，而模板文件的作用主要用于 webpack 中 html-webpack-plugin 插件的配置，其会根据模板文件生产一个编译后的 html 文件并自动加入携带 hash 的脚本和样式，基本配置如下

/* webpack 配置文件 */
const HtmlWebpackPlugin = require('html-webpack-plugin') // 安装并引用插件

module.exports = {
 ...
 
 plugins: [
  new HtmlWebpackPlugin({
   title: 'My Page', // 生成 html 中的 title
   filename: 'demo.html', // 生成 html 的文件名
   template: 'xxx/xxx/demo.html', // 模板路径
   chunks: ['manifest', 'vendor', 'demo'], // 所要包含的模块
   inject: true, // 是否注入资源
  })
 ]
 
 ...
}

以上是单模板的配置，那么如果是多模板只要继续往 plugins 数组中添加 HtmlWebpackPlugin 即可，但是为了和多入口一样能够灵活的获取 pages 目录下所有模板文件并进行配置，我们可以在 utils.js 中添加多模板的读取解析方法

/* utils.js */

// 多页面

输出配置 // 与上面的多页面入口配置相同，读取 page 文件夹下的对应的 html 后缀文件，然后放入数组中 exports.htmlPlugin = configs => { let entryHtml = glob.sync(PAGE_PATH + '/*/*.html') let arr = [] entryHtml.forEach(filePath => { let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.')) let conf = { template: filePath, // 模板路径 filename: filename + '.html', // 生成 html 的文件名 chunks: ['manifest', 'vendor', filename], inject: true, } // 如果有自定义配置可以进行 merge if (configs) { conf = merge(conf, configs) } // 针对生产环境配置 if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, // 删除 html 中的注释代码 collapseWhitespace: true, // 删除 html 中的空白符 // removeAttributeQuotes: true // 删除 html 元素中属性的引号 }, chunksSortMode: 'manual' // 按 manual 的顺序引入 }) } arr.push(new HtmlWebpackPlugin(conf)) }) return arr }

Vue CLI3基础学习之pages构建多页应用 - 文章图片

以上我们仍然是使用 glob 读取所有模板文件，然后将其遍历并设置每个模板的 config ，同时针对一些自定义配置和生产环境的配置进行了 merge 处理，其中自定义配置的功能我会在下节进行介绍，这里介绍一下生产环境下 minify 配置的作用：将 html-minifier 的选项作为对象来缩小输出。
html-minifier 是一款用于缩小 html 文件大小的工具，其有很多配置项功能，包括上述所列举的常用的删除注释、空白、引号等。
当我们编写完了多模板的方法后，我们同样可以在 vue.config.js 中进行配置，与多入口不同的是我们在 configureWebpack 中不能直接替换 plugins 的值，因为它还包含了其他插件

/* vue.config.js */

const utils = require('./build/utils')

module.exports = {
 ...
 
 configureWebpack: config => {
  config.entry = utils.getEntries() // 直接覆盖 entry 配置
  
  // 使用 return 一个对象会通过 webpack-merge 进行合并，plugins 不会置空
  return {
   plugins: [...utils.htmlPlugin()]
  }
 },
 
 ...
}

如此我们多页应用的多入口和多模板的配置就完成了，这时候我们运行命令 yarn build 后你会发现 dist 目录下生成了 3 个 html 文件，分别是 index.html 、 page1.html 和 page2.html

四、使用 pages 配置

其实，在 vue.config.js 中，我们还有一个配置没有使用，便是 pages 。 pages 对象允许我们为应用配置多个入口及模板，这就为我们的多页应用提供了开放的配置入口。官方示例代码如下

/* vue.config.js */
module.exports = {
 pages: {
  index: {
   // page 的入口
   entry: 'src/index/main.js',
   // 模板来源
   template: 'public/index.html',
   // 在 dist/index.html 的

输出 filename: 'index.html', // 当使用 title 选项时， // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page', // 在这个页面中包含的块，默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时， // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话，就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: 'src/subpage/main.js' } }

我们不难发现， pages 对象中的 key 就是入口的别名，而其 value 对象其实是入口 entry 和模板属性的合并，这样我们上述介绍的获取多入口和多模板的方法就可以合并成一个函数来进行多页的处理，合并后的 setPages 方法如下

// pages 多入口配置
exports.setPages = configs => {
 let entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
 let map = {}

 entryFiles.forEach(filePath => {
  let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
  let tmp = filePath.substring(0, filePath.lastIndexOf('\/'))

  let conf = {
   // page 的入口
   entry: filePath, 
   // 模板来源
   template: tmp + '.html', 
   // 在 dist/index.html 的

输出 filename: filename + '.html', // 页面模板需要加对应的js脚本，如果不加这行则每个页面都会引入所有的js脚本 chunks: ['manifest', 'vendor', filename], inject: true, }; if (configs) { conf = merge(conf, configs) } if (process.env.NODE_ENV === 'production') { conf = merge(conf, { minify: { removeComments: true, // 删除 html 中的注释代码 collapseWhitespace: true, // 删除 html 中的空白符 // removeAttributeQuotes: true // 删除 html 元素中属性的引号 }, chunksSortMode: 'manual'// 按 manual 的顺序引入 }) } map[filename] = conf }) return map }

上述代码我们 return 出的 map 对象就是 pages 所需要的配置项结构，我们只需在 vue.config.js 中引用即可

/* vue.config.js */

const utils = require('./build/utils')

module.exports = {
 ...
 
 pages: utils.setPages(),
 
 ...
}

这样我们多页应用基于 pages 配置的改进就大功告成了，当你运行打包命令来查看输出结果的时候，你会发现和之前的方式相比并没有什么变化，这就说明这两种方式都适用于多页的构建，但是这里还是推荐大家使用更便捷的 pages 配置

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

内容总结

以上是互联网集市为您收集整理的Vue CLI3基础学习之pages构建多页应用全部内容，希望文章能够帮你解决Vue CLI3基础学习之pages构建多页应用所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/331333.html

来源：【匿名】

【上一篇】vue2之简易的pc端短信验证码的问题及处理方法【下一篇】php怎么返回数据给vue

更多 ►

【Vue CLI3基础学习之pages构建多页应用】教程文章相关的互联网学习教程文章

Vue.js基础篇实战--一个ToDoList小应用

距离开始学Vue已经过去一个多月了，总想把学到的东西柔和在一起，做点东西出来，于是有了这个Todolist小应用。主要功能就是把一天要做的事情记录下来，还实现了：标记完成事件删除已完成事件各种排序仅显示未完成的项目本地保存截图看这里用时一周，14次commits,把心中的构想基本实现了。详情请看：这里整个过程下来，收获还是很多的，1.对mvvm有了进一步的理解，2.对css布局有了更多的了解。3.更进一步理解了Vue的事件和组件机制。...

vue基础【代码】

入门篇vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。另外几个常见的工具库：react.js /angular.js官方网站：中文：https://cn.vuejs.org/英文：https://vuejs.org/官方文档：https://cn.vuejs.org/v2/guide/vue.js目前有1.x、2.x和3.x 版本，本篇使用2.x，原因是目前3.x还不成熟。vue.js库的下载可以在官网下载，有开发版本和生产版本，学习时使用开发版本就行。也可以在 GitHub 下载，js位于 dist 文件夹...

vue基础01【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>[v-cloak]{display: none;}#app{width: 800px;margin: 20px auto;}#tb{width: 800px;border-collapse: collapse;margin: 20px auto;}#tb th{background-color: #0094ff;color:white;font-size: 16px;padding: 5px;text-align: center;border: 1px solid black;}#tb td{padding: 5px;text-align: center;border: 1px solid black;}</sty...

Vue基础指令【代码】【图】

一 Vue框架简介　　　Vue是一个构建数据驱动的web界面的渐进式框架。　　目标是通过尽可能简单的API实现响应式的数据绑定和组合的视图组件1 <div id="app"> 2 <span>你的名字是{{name}}</span> 3 </div> 4 var app=new Vue({ 5 el: ‘#app‘, 6 data:{ 7 name:‘wdb‘8 } 9 })二 Vue指令　　　　Vue的指令directives很像我们所说的自定义属性，指令是Vue模板中最常用的功能，　　它...

Vue的基础使用【代码】

Vue的介绍渐进式的JavaScript框架vue react angualr作者:尤雨溪 facebook 谷歌公司文档:中文建议:如果你想学好vue 1.看视频初步的了解vue 2.学vue的课时刻看官网文档 https://cn.vuejs.org/前端框架和库的区别功能上的不同jquery库：包含DOM(操作DOM)+请求，就是一块功能。art-template库：模板引擎渲染，高性能的渲染DOM (我们后端的一种模板跟python的模板类似)框架：大而全的概...

vuex基础详解及项目实例【代码】【图】

1、概念Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件，它包括State（数据源）、Getters（计算属性）、Modules（模块）、Mutations（事件）、Action（事件）。Action与Mutation的区别在于Mutation可以更改State，所以当Action要更改状态时通常是提交到Mutation中更改。2、安装2.1、安装完vue后就可安装vuex，本次示例建立在安装了vue-cli脚手架工具的基础上。安装vuex方法为在命令行输入：npm install vu...

vue基础练习【代码】

<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>vue dom</title><script src="https://unpkg.com/vue"></script> </head> <body><div id="app">{{message}}</div><div id="app-2"><span v-bind:title="message">鼠标悬停查看绑定信息</span></div><div id="app-3"><s...

vue基础【图】

v-html 不会把标签打印出来v-text 会把标签打印出来vue的循环不是放在父便签上，而是放在被循环的循环体上v-for="(value,key)in objList"v-for="(item,index)in ArrList"可以遍历数组和对象，组件引入组件先import a组件component{ a:a}v-bind:href 缩写 :href 绑定属性是动态属性变量属性组合的写法 classA和 hasError都是动态变量 :class=“[classA,{‘red-font‘:hasError}]”v-on:click 缩写 @click @keydown...

vue基础---04计算属性【代码】

00.计算属性<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="app"><h1>{{firstname+lastname}}</h1><h1>{{fullname}}</h1></div><script type="text/javascript">var app=new Vue({el:...

ngnix 部署 vue项目-基础篇【代码】

ngnix 部署 vue项目-基础篇标签（空格分隔）： docker ngnix vue Dockerfile目录基础知识主要知识点###1.基础知识 image containerdocker 命令 build run rm rmi execDockerfilenpm 打包vue项目###2.主要知识点Dockerfile image container 简单来讲，Dockerfile构建出Docker镜像，通过Docker镜像运行Docker容器。Dockerfile 包含构建image的指令#基于centos镜像 FROM centos #引用指定基础镜像#维护人的信息MAINTAINER The CentOS...

VUE学习---vue基础与vue-router【代码】【图】

一.前端开发工具包node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。官网：https://nodejs.org/en/下载最新版本安装，疯狂点击下一步，就可以了！安装完成后，打开cmd控制台，输入命令node -v 查看版本：C:\Users\john>node -v v10.7.0本质上还是JS，跑在V8引擎上的，让JS能够和操作系...

Vue基础（ES6）【代码】【图】

起步1.扎实的HTML/CSS/Javascript基本功，这是前置条件。2.不要用任何的构建项目工具，只用最简单的<script>，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。什么是ECMAScript，以及es6的诞生？1997年 ECMAScript 1.0 诞生1999年12月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了JS的基本语法，被其后版本完全继承。直到今天，我们...

vue入门学习（基础篇）

vue入门学习总结：vue的一个组件包括三部分：template、style、script。vue的数据在data中定义使用。数据渲染指令：v-text、v-html、{{}}。隐藏未编译的标签：v-cloak 。控制模块隐藏:v-if（值为false时不会渲染到dom上）、v-show（相当于display属性的show和hide）。事件绑定：v-on、@语法，一般方法写在methods里面，需要操作dom的方法写在mounted里面，此时dom渲染完毕。属性绑定:v-bind、:用法，例如:class= " {red:isRed}"。定...

Vue基础之数据绑定【代码】【图】

我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。创建一个Vue应用话不多说，先上代码，让我们感受一下Vue的核心功能<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div ><input type="text" v-model="message">...

vue基础（二）【代码】

1.css样式操作<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.classA {background-color: hotpink;}.classB {color: lawngreen;}.classC {font-size: 80px;}/* 1、类的操作2、style的操作*/</style></head><body><div id="root"><p ...

首页 / VUE / Vue CLI3基础学习之pages构建多页应用

Vue CLI3基础学习之pages构建多页应用

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue CLI3基础学习之pages构建多页应用】教程文章相关的互联网学习教程文章

Vue.js基础篇实战--一个ToDoList小应用

vue基础【代码】

vue基础01【代码】

Vue基础指令【代码】【图】

Vue的基础使用【代码】

vuex基础详解及项目实例【代码】【图】

vue基础练习【代码】

vue基础【图】

vue基础---04计算属性【代码】

ngnix 部署 vue项目-基础篇【代码】

VUE学习---vue基础与vue-router【代码】【图】

Vue基础（ES6）【代码】【图】

vue入门学习（基础篇）

Vue基础之数据绑定【代码】【图】

vue基础（二）【代码】

PAGE - 相关标签

VUE - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程