vue开发多页面应用
注:vue单页面第一次打开慢,页面切换非常快;vue多页面单页面打开快,但是每次切换页面都要加载页面数据,相对较慢。
1、添加多页面配置
在工程根路径下(package.json同目录)添加添加vue.config.js配置文件,内容为:
module.exports = {
pages: {
index: 'src/main.js',
home: {
// 应用入口配置,相当于单页面应用的main.js,必需项
entry: 'src/modules/home/home.js', // 应用的模版,相当于单页面应用的public/index.html,可选项,省略时默认与模块名一致
template: 'public/home.html', // 编译后在dist目录的输出文件名,可选项,省略时默认与模块名一致
filename: 'home.html', // 标题,可选项,一般情况不使用,通常是在路由切换时设置title
// 需要注意的是使用title属性template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'homepage', // 包含的模块,可选项
chunks: ['home']
},
// 只有entry属性时,直接用字符串表示模块入口
about: 'src/modules/client/about.js'
}
}
2、创建多页面应用
创建模块,在src下创建目录modules,在modules下创建两个模块home和about;在public下添加模版home.html和about.html。完成后工程结构如下:
3、应用路由配置
import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'home',
component: (resolve) => require(['./Home.vue'], resolve)
}
]
})
import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) export default new Router({
routes: [
{
path: '/about',
name: 'about',
component: (resolve) => require(['./About.vue'], resolve)
}
]
})
4、页面添加链接
<template>
<div id="app">
<nav>
<a href="home.html">Home</a> |
<a href="about.html">About</a>
</nav>
</div>
</template>
vue开发多页面应用的更多相关文章
- vue开发多页面应用 - hash模式和history模式
我们知道vue可以快速开发web单页应用,而且官方为我们提供了自己的应用脚手架vue-cli,我们只需要下载脚手架,安装依赖后就可以启动vue应用雏形. 这得益与webpack的依赖追踪,各种资源后缀 ...
- beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)
具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...
- vue之多页面的开发
我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是.因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面.但是vu ...
- 用vue开发一个公众号商城SPA——1.前期准备和写页面
使用vue开发公众号商城 第1篇记录项目准备.搭建,写页面遇到第问题以及总结,持续更新 公司最近接了个商城项目,包括PC端商城.微信公众号网页商城.后台管理系统.这几天在做微信公众号商城,又新接触了很 ...
- 用Vue开发一个实时性时间转换功能,看这篇文章就够了
前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...
- vue开发项目详细教程(第一篇 搭建环境篇)
最近做vue做项目碰到了不少坑,看了三天文档便开始上手做项目了,不是我牛b,是因为项目紧,我没有时间去深入学习,所以只能一边学一边做了. 我要做的项目是一个官方网站(包括管理后台),也因为是我第一次使 ...
- vue开发记录--element-ui的form表单label和placeholder国际化遇到的小问题
<el-form-item label="$t('permission.employeeName')"> <el-input v-model="form ...
- Vue开发环境搭建
Nodejs与包管理工具安装: Windows安装: https://nodejs.org/en/ 下载安装包安装就可以. Ubuntu安装: //安装nodejs sudo apt-get inst ...
- [总结]vue开发常见知识点及问题资料整理(持续更新)
package.json中的dependencies与devDependencies之间的区别 –save-dev 和 –save 的区别 我们在使用npm install 安装模块或插件的时候,有两 ...
随机推荐
- SSM和Spring Boot常用配置比较
一.Dao层相关 1.Mysql相关: 1.1配置DataSource连接池: (1)SSM配置: <!-- 加密后配置自己写的解析文件 --> <bean class=" ...
- 帝国cms 常用标签汇总
1.列表内容标签 [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--] 2.分页标签 [!--show. ...
- 网络初级篇之DHCP原理与配置(原理与实验)
一.什么是DHCP DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)通常被应用在大型的局域网络环境中,主要作用是集中的管理.分配IP地址,使网络环境 ...
- 01-jar包操作---idea打jar包
文章:idea打包java可执行jar包 maven项目的话,使用maven命令,直接build就可以打jar包.
- C# 类的继承和访问
学习笔记------类的继承和访问: class MyBaseClass { public void PrintSun(){ Console.WriteLine("base111111111 ...
- HTML5 App的代码注入攻击
原文链接 摘要 基于HTML5的手机app(译者注:以下简称HTML5 app)越来越流行了, 在大多数情况下它比native应用更容易适配不同的移动操作系统.它开发起来很方便,可以使用标准的web技 ...
- nvidia-docker安装
如果之前安装过docker1.0版本,需要先删掉该版本和之前创建的容器 docker volume ls -q -f driver=nvidia-docker | xargs -r -I{} -n1 ...
- Tableau 分群
对数据的特征进行分析,分群. 数据选用的是Iris data 下载地址:http://archive.ics.uci.edu/ml/machine-learning-databases/iris/ 1 ...
- Automatches
import os def combine(ArrayList,count): ArrayList=list(ArrayList) newArrayList=[] for i in range(0,A ...
- Kendo UI for jQuery使用教程:使用MVVM初始化(二)
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...