继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

3天用vue写一个简单的app

慕仔8372428
关注TA
已关注
手记 8
粉丝 0
获赞 2

今年是vue比较火的一年,自己也在闲暇之余,用vue全家桶+vuxui框架,写了一个简单的app应用,首先来看下效果吧(ps:数据来自掘金)





以上就是基本效果图,项目中用了




vue-router =>   路由axios      =>    ajax请求方式vuex      =>     状态管理(ps:由于项目比较小,也就没有具体是用vuex,只是将数据存储到本地,来展示在页面,本质和vuex做到同样的效果)vux       =>     ui框架(ps:个人认为vux不适合新手使用,使用困难难度较大,建议使用比较简单的ui框架,如:vue-ydui,mint-ui...)vue-cli2.x   ps:虽然vue3.0脚手架出来了,但是没有具体文档,webpack方面也需要自己配置,上手比较困难,建议使用vue2.x版本脚手架复制代码



首先




vue init webpack 项目名称复制代码


第二步




写好需要用到的文件夹及路由复制代码




为什么要自己封装一个弹窗插件,因为vux我也是才用,当时看的一脸懵逼,所以就自己封装了一个简单的弹窗插件...

代码中并没有什么难点,也没有很多的骚操作,仅仅适用于刚刚接触vue的人,代码中不正确的地方,还请各位大佬纠正


首先,一听到封装插件,一般人就觉得好难,其实并不是那么难,由于本人技术有限,所以就用原生封装的插件(ps:如果各位大佬有好的方法,情赐教)


下一步 => 将一些常用的函数封装,以便使用,在这里我只封装了验证手机号,邮箱和密码(密码和没封装差不多,喜欢的朋友可以自己尝试一下)





这里引入vue只是为了使用挂载在vue原型上的弹窗插件,当然也可以引入上面的diLog.js 使用里面的方法,但是既然挂载在了vue原型上,那我们就物尽其用吧import Vue from 'vue' =>  引入vue,使用vue原型上方法Vue.prototype.$diaLog.errFunctio()  =>  使用挂载在vue原型上的函数复制代码



登陆页面和游戏页面使用了简单的css3动画,有兴趣的可以自己尝试一下https://www.djsminiaturegoLf.com



没有ui有些页面比较丑陋,还请见谅,本人手写了一些简单下啦刷新,上啦加载等操作,下面

看下代码


此项目充分使用了组件复用,登陆,注册找回密码公用一个组件

                                       首页和发现页公用一个组件,

                                       看起来会比较乱,但是避免了代码冗杂

项目中使用了路由,组件懒加载

eg:





// 游戏   路由懒加载    {      path: '/playGame',      name: 'playGame',      component: resolve => require(['@/page/playGame/playGame'], resolve),      meta: {        isShow: false      }    },//组件懒加载components: {    findList: resolve => require(["./components/findList"], resolve)  },//这里使用懒加载只是做个示例,用于代码打包后首屏加载速度复制代码


以上就是全部代码,稍后上传github供大家参考  

想要一起学习的可以在下方留言,欢迎各位大佬指点纠正


end.


转载于:https://juejin.im/post/5c4db71af265da616c65f4cc


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP