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