vue开发多页应用_h5页面开发

Vue (4) 2024-09-14 18:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
vue开发多页应用_h5页面开发,希望能够帮助你!!!。

最近在做的项目都是SPA的单页面应用,但实际工作中,单页面并不一定符合业务需求,比如在现有H5项目基础上一步一步将众多页面升级至vue框架,这就需要多页面开发。这种情况下就体现出了Vue所谓渐进式框架的优势,可以与现有项目进行整合。接下来就说一下多页面的配置:

假设已经安装好了node,并且已经搭建好了基于vue-cli的脚手架。

第一步:新建所要增加的.html、.vue、.js文件,如下图所示:

vue开发多页应用_h5页面开发_https://bianchenghao6.com/blog_Vue_第1张

这里为了演示清晰,增加了one.html、two.html以及对应的vue和js文件。

第二步:进入\build\webpack.base.conf.js目录下,在module.exports对象下,找到entry,在那里配置添加多个入口:

vue开发多页应用_h5页面开发_https://bianchenghao6.com/blog_Vue_第2张

第三步:对开发环境进行修改,进入\build\webpack.dev.conf.js文件,在module对象里找到plugins,下面写法如下:

vue开发多页应用_h5页面开发_https://bianchenghao6.com/blog_Vue_第3张

在chunks里的app、one、two指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry,如果没写则引入所有页面的资源。

第四步:对编译环境进行配置。进入\config\index.js文件,在build里增加相对应的打包文件:

vue开发多页应用_h5页面开发_https://bianchenghao6.com/blog_Vue_第4张

第五步:打开/build/webpack.prod/conf.js文件,在plugins那里找到HTMLWebpackPlugin,添加如下代码:

vue开发多页应用_h5页面开发_https://bianchenghao6.com/blog_Vue_第5张

最后就是one.html,one.js,one.vue的写法了,这个参照初始项目中的index.html,main.js,app.vue就可以了,然后app.vue里就可以这样写了:

vue开发多页应用_h5页面开发_https://bianchenghao6.com/blog_Vue_第6张

代码基本上都可以从项目文件里面复制粘贴到,然后加以修改,祝大家学习愉快!

关注我的头条号,分享更多的技术学习文章,我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

发表回复