vue2.0之多页面的开发
-----------------------------------------------------------------------------------------------------------------
写在最前面:这段分割线的内容是2018年4月3日写的,我2017年6月写了这篇文章,在这快一年的时间里,有人按照我的方法成功的实现多页面的开发,有人因为对webpack的配置不熟导致走了很多弯路。我本人一直想写一篇这篇文章的姐妹版来对这些内容进行更加详细的补充,但是时间和精力都不够。偶尔上网发现了这个链接,我觉得他讲的挺好的,如果想要了解更多的话请看这篇《webpack多页应用架构系列》整理成书了 。下面我写的这篇文章是我在大三的时候写的,那时候技术尚浅,可能对某些内容的理解有错误,请各位看官看的时候辩证的看。
-----------------------------------------------------------------------------------------------------------------
我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是。因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面。但是vue不止可以做单页面,它还可以做多页面,如果要做多页面的话需要对他的依赖,也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。
vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解步骤。
先声明,如果用vue进行工程化开发,首先要有node.js,然后再下一个npm,不过一般新版的node都会有npm所以可以不用弄。指令是在命令行里输入。首先第一步就是生成一个vue项目,用指令:
vue init webpack test
博主本人声明的文件名为test,下载好后一路enter,之后便生成了一个vue项目,但是这个vue项目还没有一些相关的依赖,这个时候需要进入到该文件夹里面,输入指令:
npm install
如果网速不好,则用cnpm install,效果一样。略等几分钟后整个依赖便已经下完,之后输入指令:
npm run dev
则会自动打开一个界面,如果报错不能打开网页的话只有一种原因,那就端口占用,这个时候需要到/config/index.js目录下改端口就行。
当一个vue项目完成好所有的配置后,接下来就是我们的重点了,首先我们新新建几个html文件,博主我新建了一个one.html和two.html,及其与之对应的vue文件和js文件,文件目录如下:
弄好之后我们进入\build\webpack.base.conf.js目录下,在module.exports的域里,找到entry,在那里配置添加多个入口:
entry: {app: './src/main.js', one: './src/js/one.js', two: './src/js/two.js' },
注意,紫色部分的变量名要起好,因为后面要用到,以防忘记。
接下来就是对开发环境run dev里进行修改,打开\build\webpack.dev.conf.js文件,在module.exports那里找到plugins,下面写法如下:
plugins: [new webpack.DefinePlugin({'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin 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']}), new FriendlyErrorsPlugin() ]
在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry,如果没写则引入所有页面的资源。
之后就对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'),
然后打开/build/webpack.prod/conf.js文件,在plugins那里找到HTMLWebpackPlugin,然后添加如下代码:
new HtmlWebpackPlugin({filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index, template: 'index.html', inject: true, minify: {removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin 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,不然会加载所有页面的资源。
然后one.js文件可以这样写:
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) })
one.vue写法如下:
<template> <div id="one"> {{msg}}</div> </template> <script> export default {name: 'one', data () {return {msg: 'I am one' }} } </script>
two的写法与之类似,所以不写下来了,
然后App.vue里通过这样写:
<template> <div id="app"> <a href="one.html">one</a><br> <a href="two.html">two</a><br> {{msg}}</div> </template>
这样子当你打开页面的时候,点击上面one的链接就会跳转到one.html,点击two就跳转到two.html。这样子就大功告成了。
vue2.0之多页面的开发相关推荐
- 【Vue2.0】—解决页面闪烁的问题(八)
[Vue2.0]-解决页面闪烁的问题(八) v-cloak指令(没有值) 1.本质上是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性 2. 使用css配合v-cloak可解决网 ...
- 基于Vue2.0的单页面开发方案
2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢. 毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高 ...
- Vue2.0通过二级路由实现页面切换
vue2.0通过二级路由实现页面切换 需求分析:以下歌手列表(singer.vue)页中,点击列表跳转到歌手详情页(singer-detail.vue). 实现方法:使用二级vue-router实现. ...
- Vue2.0 全家桶开发的网页应用(参照吾记APP)
github链接 借鉴吾记APP,使用 vue2.0 vue-router vuex 为主要技术栈,elementui做为ui框架,多模块 spa 模式,webpack2.0 负责模块打包,gulp ...
- 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)
最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...
- vue结合饿了么_饿了么基于Vue2.0的通用组件开发之路(分享会记录)
Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...
- 【vue2.0后台项目之登陆】01登陆开发流程分析
登陆开发流程 1.前言 2.vue-admin-template模板介绍 3. vue-admin-template模板结构分析 4.axios的二次封装 5.请求后端接口 6.表单验证 7.派发ac ...
- ASP.NET 2.0 正式版中无刷新页面的开发
ASP.NET 2.0 正式版中无刷新页面的开发 在已经发布的 ASP.NET2.0 中,无刷新页面开发相关部分同 beta2 有不少改动.而且在越来越多的 Ajax 开发包被开发出来的情况下, AS ...
- 饿了吗app都是用html写的,Vue2.0仿饿了么webapp单页面应用详细步骤
这篇文章主要为大家详细介绍了Vue2.0仿饿了么webapp单页面应用详细步骤,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 部分截图 [图片暂 ...
最新文章
- wps临时文件不自动删除_win10系统下wps残留文件无法删除如何解决
- 01矩阵等比放大(Java代码、ACM格式)--2021.9.7百度笔试研发A卷
- 如何知道我的电脑是多少位 ?
- Python中包(package)的调用方式
- __int64 与long long 的区别
- Windows平台如何查看一个dll依赖的其他dll
- 个人收藏的flex特效网址【经典中的极品】
- VUE3@clli组件样式、全局组件、配置打包
- HTML如何设置音频播放器控件的大小
- pcb文件转成原理图_初学PCB设计,到底该学习哪款软件?
- VB2010实例(2) _滚动字幕
- 2019最新Python学习教程_Python学习视频_Python学习路线:学Python,这次你可得认真看完了!
- LTE:FDD、TDD下行峰值速率计算
- android apk u盘升级_android升级安装包--包解析错误
- 电子工程师必备(电子书版3本全):
- jscript和javascript区别
- 高数 | 极限定义函数 系列例题
- 工具及方法 - 如何保护眼睛
- c语言快速复数的比较大小,c语言中的复数操作
- Java开发真的这么赚钱?连做金融的忍不住转行了
热门文章
- 超分辨率——综述文章
- 程序员数字_作为社会科学程序员处理不同的数字数据
- 【C语言初级阶段学习1】使用vscode运行C语言,vscode配置环境超详细过程(包括安装vscode和MinGW-W64安装及后续配置使用的详细过程,vscode用户代码片段的使用)[考研专用]
- 知道创宇研发技能列表v3.0
- SenseTime Ace Coder Challenge 暨 商汤在线编程挑战赛 D. 白色相簿
- 手机计算机的隐藏小技巧,华为手机隐藏的5个技巧,每一个值得收藏
- 数据结构之简单迷宫求解
- 如何确定因果关系?四种理论分析模型
- Word输入的英文字体被默认为宋体并无法修改的解决办法
- 工作9年程序员面试华为要薪1万,华为员工:公司没这么低工资的岗.