vue-cli3 中构建多页面的应用

　　第一步：先创建一个 vue-cli3 的项目：vue create app

　　然后运行项目：npm run serve

　　现在开始多页面的应用：

　　首先在 src 的目录下面，创建一个 pages 的文件，然后如图，创建这样的目录结构，每一个文件夹，对应的是一个页面；

　　　　

　　接下来说每个文件所对应的内容，所有的文件都是这样的套路

　　　　index.html

　　　　　　

　　　　代码：

　　　　　　<!DOCTYPE html>
　　　　　　<html>
　　　　　　　　<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 id="App">
  
 　　　　　　　　　　 </div>
　　　　　　　　</body>
　　　　　　</html>

　　

　　　　index.js

　　　　　　

　　　　代码：　

　　　　　　import Vue from 'vue';
　　　　　　import Ass from './index.vue';
　　　　　　Vue.config.productionTip = false;
　　　　　　new Vue({
　　　　　　　　  render: h => h(Ass)
　　　　　　}).$mount('#App')

　　　index.vue

　　　　　　

　　　　代码：　　

　　　　　　<template>
  　　　　　　　　<div>
    　　　　　　　　　　hello page1;
  　　　　　　　　　　  <a href="page2.html">我要走向世界</a>
　　　　　　　　  </div>
　　　　　　</template>
　　　　　　<script>
　　　　　　　　export default {
  
　　　　　　　　}
　　　　　　</script>
　　　　　　<style lang="scss" scoped>
　　　　　　</style>

　　然后我们需要在跟目录下创建一个 vue.config.js 的文件

　　　　

　　代码：　

　　　　let glob = require('glob')
　　　　//配置pages多页面获取当前文件夹下的html和js
　　　　function getEntry(globPath) {
   　　　　 let entries = {}, tmp, htmls = {};
   　　　　 // 读取src/pages/**/底下所有的html文件
   　　　　 glob.sync(globPath+'html').forEach(function(entry) {
        　　　　tmp = entry.split('/').splice(-3);
        　　　　htmls[tmp[1]] = entry
    　　　　})
   　　　　 // 读取src/pages/**/底下所有的js文件
    　　　　glob.sync(globPath+'js').forEach(function(entry) {
      　　　　  tmp = entry.split('/').splice(-3);
      　　　　  entries[tmp[1]] = {
           　　　　 entry,
           　　　　 template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', //  当前目录没有有html则以共用的public/index.html作为模板
           　　　　 filename:tmp[1] + '.html'   //  以文件夹名称.html作为访问地址
        　　　　};
    　　　　});
    　　　　console.log(entries)
   　　　　 return entries;
　　　　}
　　　　let htmls = getEntry('./src/pages/**/*.');
　　　　module.exports = {
  　　　　pages:htmls,
  　　　　publicPath: './',           //  解决打包之后静态文件路径404的问题
 　　　　 outputDir: 'dist',        //  打包后的文件夹名称，默认dist
 　　　　 devServer: {
      　　　　open: true,             //  npm run serve 自动打开浏览器
    　　　　  index: '/page1.html'    //  默认启动页面
  　　　　}
　　　　}

　　然后我们打包指令：npm run build

　　　　我们跳转的方式就可以通过 a 标签来实现了

　　然后我们可以看到出口文件的打包情况

　　　　

　　　　

vue 的多页面应用的更多相关文章

  1. vue获得当前页面URL动态拼接URL复制邀请链接方法

    vue获得当前页面URL动态拼接URL复制邀请链接方法 当前页面完整url可以用 location.href路由路径可以用 this.$route.path路由路径参数 this.$route.par ...

  2. 【vue】使用vue构建多页面应用

    先了解一些单页面和多页面的区别 mm 多页应用模式MPA 单页应用模式SPA 应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成 跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片 ...

  3. vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  4. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  5. 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...

  6. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  7. 用vue实现登录页面

    vue和mui一起完成登录页面(在hbuilder编辑器) <!DOCTYPE html> <html> <head> <meta charset=" ...

  8. 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...

  9. 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间

    本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...

  10. vue 配置多页面应用

    前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化) vue 是单页面应用.但是在做大型项目时,单页面往往无法满足我们的需求, ...

随机推荐

  1. 使用PyQt5自制文件查找工具，并生成EXE文件

    一.工作中,有一个关键词查找工作,查找开发版本中使用的文本,有哪些词语是非法的,一个一个去查太累了,所以想到了用代码来实现.可后来想想,能否做成简单的小工具,大家都可以使用. 于是就着手编写工具.原来 ...

  2. docker 安装php

    nginx :docker pull nginx docker run -p 80:80 --name nginx -v /usr/local/nginx/www:/www -v /usr/local ...

  3. 十四，K8s集群网络flannel及canal策略

    目录 k8s网络CNI之flannel k8s网络通信模型 常见CNI插件(Container,Network,Interface) 插件通信一般的解决方案 网络插件的应用 Flannel插件 fla ...

  4. UDS报文解读

    UDS(Unified Diagnostic Services,统一的诊断服务)诊断协议是ISO 15765 和ISO 14229 定义的一种汽车通用诊断协议,位于OSI模型中的应用层,它可在不同的汽 ...

  5. 序列化 json pickle shelve configparser

    一 什么是 序列化 在我们存储数据或者 网络传输数据的时候,需要对我们的 对象进行处理,把对象处理成方便我们存储和传输的 数据格式,这个过程叫序列化,不同的序列化,结果也不相同,但是目的是一样的,都是 ...

  6. 6.MNIST数据集分类简单版本

    import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data # 载入数据集 mnist = i ...

  7. 【NOIP2012】同余方程

    原题: 求关于xx的同余方程ax≡1(mod b)的最小正整数解. 裸题 当年被这题劝退,现在老子终于学会exgcd了哈哈哈哈哈哈哈哈 ax≡1(mod b) => ax=1+by => ...

  8. hashmap C++实现分析及std::unordered_map拓展

    今天想到哈希函数,好像解决冲突的只了解了一种链地址法而且也很模糊,就查了些资料复习一下 1.哈希Hash 就是把任意长度的输入,通过哈希算法,变换成固定长度的输出(通常是整型),该输出就是哈希值. 这 ...

  9. 【转】关于 Ruby 解释器：一些你需要知道的

    关于 Ruby 解释器:一些你需要知道的 原文:Ruby Interpreters: What You Need to Know 使用正确的 Ruby 解释器来运行程序可以发挥重要作用,不幸的是很难找 ...

  10. java 学习笔记（三）ZooKeeper集群搭建实例，以及集成dubbo时的配置 （转）

    ZooKeeper集群搭建实例,以及集成dubbo时的配置 zookeeper是什么: Zookeeper,一种分布式应用的协作服务,是Google的Chubby一个开源的实现,是Hadoop的分布式 ...