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 是单页面应用.但是在做大型项目时,单页面往往无法满足我们的需求, ...
随机推荐
- Hive的日志操作
想要看hive的日志,我们查看/home/hadoop/hive/conf/hive-log4j2.properties # list of properties property.hive.log. ...
- mac 下的操作
nodejs在Mac下的卸载 在 node 官网上下载的安装包,用安装包安装的node.应该可以用一下命令行卸载: 在终端输入以下命令: sudo rm -rf /usr/local/{bin/{no ...
- 小程序中使用components方法selectComponent遇到的坑 返回为null
前言:哎呦气死了,小程序等着发布审核得时候 发现了一个bug,selectComponent获取不到组件了,返回值一直为null 原因居然是因为 wx:if , 代码如下,无论if是true还是fa ...
- linux获取保留yum源、并获取安装位置
linux使用yum安装之后保留yum源 linux在使用yum安装之后默认会删除rpm包,那么如何保留呢? vim /etc/yum.conf 将这里的0改成1即可 linux安装的yum源在什么地 ...
- unix/linux共享库(动态库)简介
一.创建共享库: 1.写源程序 xxx1.c xxx2.c.../*.c(通配符方式) 2.编译源程序,加-fpic生成.o文件 gcc -c -fpic xxx1.c xxx2.c.../*.c(通 ...
- QTP(15)
Test15001_两位数加法器 Option Explicit Dim num1,num2,result,ex 'result 实际结果 = 被测系统结果输入框中的值 'ex 预期结果 = num1 ...
- Linux——grep binary file
原创声明:本文系博主原创文章,转载或引用请注明出处. grep命令是linux下常用的文本查找命令.当grep检索的文件是二进制文件时,grep命令会提示: $grep pattern filenam ...
- Java通过腾讯邮箱发送邮件
private static void sendEmaill() { Properties prop = new Properties(); //协议 prop.setProperty("m ...
- BZOJ5056 OI游戏[最短路树]
有生以来做过的bzoj比A+B还简单的最水的题.(确信) 不解释. UPD:据说这题正解应当是矩阵树定理?但是这个不是用来最小生成树计数的么?有生之年会补的. #include<iostream ...
- Mac终端神器zsh
Mac终端神器zsh 先上一张图 1.背景介绍 在unix 内核的操作系统中,当然现在衍生出好多分支,linux ,OS X 都算. shell 就算和上面这些系统内核指令打交道的一座桥梁,我们通过键 ...