阅读 755

3天用vue写一个简单的app

今年是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动画,有兴趣的可以自己尝试一下



没有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.


关注下面的标签,发现更多相似文章
评论