大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家分享的是有关vue移动端项目代码拆分的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
为襄阳等地区用户提供了全套网页设计制作服务,及襄阳网站建设行业解决方案。主营业务为做网站、成都网站制作、襄阳网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
首先代码拆分应该保证本地开发的时候只有一套代码,提取所有公共页面,并且分别提取小程序和app的独立JS方法,避免开发完小程序端vue,然后粘贴复制到App端的繁琐操作。
直接看图最清晰,拆分前目录结构:
拆分后目录结构:
拆分前项目目录结构
拆分后项目目录结构
目录拆分好之后,开始拆分代码。由于部署到生产环境的时候只能App端部署App端,小程序端部署小程序端,那么在本地开发过程中为了调试不同端的页面就需要进行路由配置,所以对路由配置文件route.list.js做了修改:
拆分代码前,route.list.js中将所有页面JS文件的相对路径放在一个数组里:
define( [ ‘../xxx/xxx/user.js', ‘../xxx/xxx/goods.js', … … ] )
拆分后,route.list.js中按public、mobile_app、wechat_mini 分别定义数组,这样如果现在正在开发小程序端的vue,那么则将public和wechat_mini的数组合并到一起,开发app端的vue则将public和moblie_app的数组合并到一起,合并数组使用ES6扩展运算符(…)。
var public_goods = []; var mini_goods = []; var app_goods = []; var fun = (isWechatMini) => { if(isWechatMini){ return [ …public_goods, …mini_goods ] } else { return [ …public_goods, …app_goods ] } } define( fun(true) )
将公共部分和独立部分的页面拆分之后,进一步分析代码:App端和小程序端相互独立的大多是支付功能,分享功能等涉及到需要原生处理的地方,并且会在多个页面,多个业务中出现,那么就将App独立的vue代码拆分到一个公共JS中(app-common.js),将小程序独立的vue代码拆分到一个公共JS中(mini-common.js),在需要的页面中引入即可。就商品购买支付功能为例:
拆分前:
define([‘vue', ‘axios', ‘text!/File/Html/goods/goodsPay.html'], (vue, axios, Template) => { var App = { data() { }, template: Template, mounted() { }, methods: { pay(){ if(isWechatMini){ //这里是小程序支付 } else { //这里是App支付 } } } }; return{ app: App }; });
业务复杂的情况下,会有多层if else,代码太冗余。
拆分后:
小程序端的商品支付购买页面:
define([‘vue', ‘axios', ‘text!/File/Html/mini/goods/goodsPay.html', ‘mini-common'], (vue, axios, Template, common) => { var App = { data() { }, template: Template, mounted() { }, methods: { pay(){ //调用mini-common中定义的支付方法 common.pay(); } } }; return{ app: App }; });
App端的商品购买支付页面只需要将引入的JS换成app-common即可:
define([‘vue', ‘axios', ‘text!/File/Html/app/goods/goodsPay.html', ‘app-common'], (vue, axios, Template, common) => { var App = { data() { }, template: Template, mounted() { }, methods: { pay(){ //调用app-common中定义的支付方法 common.pay(); } } }; return{ app: App }; });
本地开发完后,部署到服务器只需要将public目录下和wechat_mini下的文件复制粘贴到打包工具打包即是小程序端的代码,public和mobile_app打包即是app端的代码。
感谢各位的阅读!关于“vue移动端项目代码拆分的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!