vue 的多页面应用
vue-cli3 中构建多页面的应用
第一步:先创建一个 vue-cli3 的项目:vue create app
然后运行项目:npm run serve
现在开始多页面的应用:
首先在 src 的目录下面,创建一个 pages 的文件,然后如图,创建这样的目录结构,每一个文件夹,对应的是一个页面;
接下来说每个文件所对应的内容,所有的文件都是这样的套路
index.html
代码:
index.js
代码:
index.vue
代码:
然后我们需要在跟目录下创建一个 vue.config.js 的文件
代码:
然后我们打包指令:npm run build
我们跳转的方式就可以通过 a 标签来实现了
然后我们可以看到出口文件的打包情况
vue 的多页面应用的更多相关文章
- vue获得当前页面URL动态拼接URL复制邀请链接方法
vue获得当前页面URL动态拼接URL复制邀请链接方法 当前页面完整url可以用 location.href路由路径可以用 this.$route.path路由路径参数 this.$route.par ...
- 【vue】使用vue构建多页面应用
先了解一些单页面和多页面的区别 mm 多页应用模式MPA 单页应用模式SPA 应用构成 由多个完整页面构成 一个外壳页面和多个页面片段构成 跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片 ...
- vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏
vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- 高性能流媒体服务器EasyDSS前端重构(一)-从零开始搭建 webpack + vue + AdminLTE 多页面脚手架
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! EasyDSS 高性能流媒体服务器前端架构概述 EasyDS ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- 用vue实现登录页面
vue和mui一起完成登录页面(在hbuilder编辑器) <!DOCTYPE html> <html> <head> <meta charset=" ...
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...
- 高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间
本文围绕着实现EasyDSS高性能流媒体服务器的前端框架来展开的,具体EasyDSS的相关信息可在:www.easydss.com 找到! 接上回 <高性能流媒体服务器EasyDSS前端重构(一 ...
- vue 配置多页面应用
前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化) vue 是单页面应用.但是在做大型项目时,单页面往往无法满足我们的需求, ...
随机推荐
- 给没有连接因特网的centos使用yum安装其他软件(转)
https://blog.csdn.net/bbg221/article/details/78360618 在centos上,使用yum安装软件很方便,比如安装gcc,java等, 但是在没有网络的情 ...
- 基于Scrapt框架的全站数据爬取
创建scrapy工程项目,除了爬虫文件中的代码需要略微修改,其他模块用法相同(如中间件,管道等): 爬虫文件代码流程 导入链接提取器 from scrapy.linkextractors import ...
- sql注入搞事情(连载二)
sql注入(连载二)安信华web弱点测试系统注入 好多人问我sql怎么学习,我一下也说不出来.我就在此做统一的解答: sql语句分为两种,不管怎么用还是怎么学习主要是要理解SQL语句的基本概念,框架, ...
- 【转】make menuconfig/.config/Kconfig解析
当执行#make menuconfig时会出现内核的配置界面,所有配置工具都是通过读取"arch/$(ARCH)/Kconfig"文件来生成配置界面,这个文件就是所有配置的总入口, ...
- python中的负数取模问题(一个大坑)
先来看一段代码 这是什么情况?为什么会出现这种结果.我们再来看看其它语言的执行结果 我们用golang.js.c分别算了一下,结果得到的结果都是一致的,但是python为啥不一样呢? 其实之所以这么做 ...
- python学习-数据类型
计算机处理的数据不单纯的指数字,计算机可以处理数字.文本.音频.视频等等各种数据,下面描述的是Python中可以直接使用和处理的基本数据类型. 整数 Python可以处理任意大小的整数,跟ja ...
- AspectJ的表达式实例
Joinpoints 连接点,通俗的讲就是想要横切的目标,这些目标包括方法(Method),构造器(Constructor),域(Field),异常(Exception),对象和类初始化(Object ...
- 1.opencv_画图
#导入工具包 import numpy as np import cv2 import matplotlib.pyplot as plt # 定义显示图片 def show(image): plt.i ...
- dyld: Symbol not found: _OBJC_CLASS_$_xxxx 错误闪退
dyld: Symbol not found: _OBJC_CLASS_$_xxx 引起的APP闪退可以先查看xxx所属的库,然后将其设为optional 例如dyld: Symbol not fou ...
- JAVA之StringUtils工具类
StringUtils 方法的操作对象是 java.lang.String 类型的对象,是对 JDK 提供的 String 类型操作方法的补充,并且是 null 安全的(即如果输入参数 String ...