Vue多页面应用开发
一、前言
我们平常对Vue的印象有这样一种感觉:Vue就像专门为单页面应用(SPA)而生,因为Vue的官方文档中也有这样的描述:
实则非也,因为vue在工程化开发的时候依赖于 webpack ,而webpack是将所有的资源整合到一块后形成一个html文件 一堆 js文件, 如果将vue实现多页面应用,就需要对他的依赖进行重新配置,也就是修改webpack的配置文件.
vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。
下面主要详述Vue的多页面应用开发(MPA)
二、具体实现步骤
2.1、需要修改的配置文件
1、进入\build\webpack.base.conf.js目录下,在module.exports的域里,找到entry,在那里配置添加多个入口:
注意绿色框的修改和对应。
entry: {app: './src/main.js',one: './src/pages/one.js',two: './src/pages/two.js'}
2、对开发环境run dev里进行修改,打开\build\webpack.dev.conf.js文件,在module.exports那里找到plugins,下面写法如下:
new HtmlWebpackPlugin({filename: 'index.html',template: 'index.html',inject: true,chunks: ['app']}),new HtmlWebpackPlugin({filename: 'one.html',template: 'one.html',inject: true,chunks: ['one']}),new HtmlWebpackPlugin({filename: 'two.html',template: 'two.html',inject: true,chunks: ['two']}),
说明:这里的配置比较重要 ,如果没写好的 在打包的时候就会报错了, 在chunks那里的app指的是webpack.base.conf.js的 entry 那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry,如果没写则引入所有页面的资源。也就是没有改项目配置前形成的单页应用。
3、之后就对run build也就是编译环境进行配置。首先打开\config\index.js文件,在build里加入这个:
index: path.resolve(__dirname, '../dist/index.html'),one: path.resolve(__dirname, '../dist/one.html'),two: path.resolve(__dirname, '../dist/two.html'),
说明:这里也就是打包之后dist文件夹中形成的 html。
4、然后打开/build/webpack.prod.conf.js文件,在plugins那里找到HTMLWebpackPlugin,添加:
new HtmlWebpackPlugin({filename: config.build.index,template: 'index.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true},chunksSortMode: 'dependency',chunks: ['manifest', 'vendor', 'app']}),new HtmlWebpackPlugin({filename: config.build.one,template: 'one.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true},chunksSortMode: 'dependency',chunks: ['manifest', 'vendor', 'one']}),new HtmlWebpackPlugin({filename: config.build.two,template: 'two.html',inject: true,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true},chunksSortMode: 'dependency',chunks: ['manifest', 'vendor', 'two']}),
说明:其中filename引用的是\config\index.js里的build,每个页面都要配置一个chunks,不然会加载所有页面的资源。
2.2、我的目录
2.3、需要新建的几个文件的代码
1、one.js文件代码:(我这里是举例),two.js和这个代码类似,注意将“one”替换成“two”即可。
import Vue from 'vue'
import one from './one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({el: '#one',render: h => h(one)
})
2、one.vue文件代码:(我这里是举例),two.vue和这个代码类似,注意将“one”替换成“two”即可。
<template><div id="one"><p>{{msg}}</p></div>
</template><script>export default {name: 'one',data() {return {msg: 'I am one'}}}
</script>
3、one.html文件代码:(我这里是举例),two.vue和这个代码类似,注意将“one”替换成“two”即可。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>one-page</title>
</head>
<body><div id="one"></div>
</body>
</html>
注意!<div id="one"></div>
中id的修改,之前忘记修改,页面空白无内容,打开控制台可以看到div标签中并无内容,且id是app我才反应过来,修改后就好了。
三、大功告成
参考链接
第二节——vue多页面开发
vue 如何实现多页面应用
Vue官网
欢迎大家一起讨论、学习
Vue多页面应用开发相关推荐
- 做了两年前端开发,平时就是拿 Vue 写写页面和组件,简历的项目经历应该怎么写得好看?
无意间在知乎看见的,感觉讲得很有道理.看原文点这里 ------> 做了两年前端开发,平时就是拿 Vue 写写页面和组件,简历的项目经历应该怎么写得好看? 2年经验做的东西没什么技术含量,应 ...
- vue多页面多路由开发环境
本人根据实际实战项目配置的vue多页面多路由开发环境,同时也支持单页应用开发.不懂的朋友可以留言. 项目代码链接:http://pan.baidu.com/s/1jI9ji2E
- vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面 这里写目录标题 vue微信小程序开发(二)---菜单以及页面 图标的选择 创建并注册页面 底部导航 大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
- app怎么嵌套vue页面_app内嵌vue单页面应用的一些坑
写这篇文章的原因是想总结一下自己最近开发的一个内嵌app的vue单页面项目,看看有哪些坑!!! 1.白屏 项目第一次上线正常 项目第二次上线,20多个用户反馈白屏(没见过这世面,心里慌的不行!!!), ...
- vue单页面跳页没有数据了_详解刷新页面vuex数据不消失和不跳转页面的解决
先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- Vue.js组件化开发实践
Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
- 七十、Vue城市页面Ajax动态渲染和兄弟组件数据传递
2020/10/29. 周四.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
- spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子 感觉还是可以用的 第一步是完成了 果断 拿过来 放到我这里这 下面直接是连接 点进去 就可以用啊 本想着不用vue 直接导入连接 ...
最新文章
- ICCV 2021 Oral | 清华提出PoinTr:几何敏感的点云补全Transformer
- Oculus也陷隐私门:向Facebook发送隐私数据
- PHP的工作原理和生命周期
- Failed to connect to 127.0.0.1 port 1080: Connection refused package:git
- Spark初识-Spark与Hadoop的比较
- 洛谷 P1372 又是毕业季I
- STM32F407+CubeMX-使用TIM产生PWM信号
- TTL怎么计算拉电流和灌电流_带你深入了解灌电流、拉电流与吸电流
- python如何创建一个类_python 3——自定义一个类、object类
- [JSOI2009]瓶子和燃料【数论】
- 数据结构C++版-图
- 【2019 BAPC - D】Deck Randomisation【中国剩余定理 + 循环节】
- iptv错误代码2003什么意思_IPTV部分错误代码和原因解释
- rk3399 rt5640 录音调试记录
- MATLAB中uigetfile函数使用方法
- Vcc(电源)和GND(地)之间接电容的作用
- 7-8 愿天下有情人都是失散多年的兄妹 (25分)
- [Linux] 添加清华镜像
- 室内导航--机器视觉、ROS、Goseek(三)ROS Noetic Ninjemys 准备
- 部分MacBook Pro突然无法充电,电量为什么显示为1%