学了几周的vue2.0,终于有时间去做一个应用了。

为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0。

项目构建使用官方vue-cli,由于项目较小,使用simple模板。

在2.0中路由不再使用router.start();而路由跳转得组件也有所变化,官方文档很全面。有一点不是很懂,就是关于路由的挂载,本来准备另外写个router.js来挂载路由,可是不太好使,所以全都放在了main.js中。

在首页有页面切换但是并不涉及路由,这里使用了动态组件,并且使用缓存

<keep-alive>
<component :is="currentView" @changeView="change" :data-list="list" :currency-list="currencyList">
<!-- 非活动组件将被缓存! -->
</component>
</keep-alive>

组件的通信之前的文章说过,这里不再陈述。

axios暂时只有英文文档https://github.com/mzabriskie/axios,不过大同小异,很快就可以入手,axios提供了一个config配置,在配置项中可以对请求的参数在请求前做统一处理,也可以处理返回数据,还有很多,都可以看文档。这里我在写的时候传递数据采用form-data形式,由于有嵌套对象,所以对外层对象格式化之前要把内层对象变为json字符串。在axios用的是qs转化为form-data形式。

mint-ui比较简陋,但是基本的组件都有了,其中也有些坑,比如下拉刷新,

loadTop (id){
//停止下拉刷新
that.$refs.loadmore.onTopLoaded(id);
}

停止下拉刷新时,这里的id是不用传具体值的,组件内部有会做处理,自己只需要按官方写上就可以了。

最后附上github地址https://github.com/Stevenzwzhai/vue-mobile-application

vue2.0实战的更多相关文章

  1. vue2.0实战记录

    1. 初始化项目vue init webpack caseone cd caseonecnpm installcnpm install less less-loader -Dcnpm install ...

  2. 前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

    webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起.webpack 本 ...

  3. vue2.0与实战开发

    慕课网实战 百度云 web前端实战: Node.js入门到企业Web开发中的应用 Web前端性能优化 让你的页面飞起来 前端跳槽面试必备技巧 前端JavaScript面试技巧全套 node.JS 线上 ...

  4. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

  5. vue2.0 构建单页应用最佳实战

    vue2.0 构建单页应用最佳实战   前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...

  6. Vue2.0史上最全入坑教程(下)—— 实战案例

    书接上文 前言:经过前两节的学习,我们已经可以创建一个vue工程了.下面我们将一起来学习制作一个简单的实战案例. 说明:默认我们已经用vue-cli(vue脚手架或称前端自动化构建工具)创建好项目了 ...

  7. vue2.0版cnode社区项目搭建及实战开发

    _________________________________________________________________________ 初涉vue就深深的被vue强大的功能,快速的开发能力 ...

  8. 适用初学者:vue2.0构建单页应用最佳实战

    参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...

  9. vue2.0项目实战(4)生命周期和钩子函数详解

    最近的项目都使用vue2.0来开发,不得不说,vue真的非常好用,大大减少了项目的开发周期.在踩坑的过程中,因为对vue的生命周期不是特别了解,所以有时候会在几个钩子函数里做一些事情,什么时候做,在哪 ...

随机推荐

  1. [bzoj1269][AHOI2006文本编辑器editor] (splay模版题 or pb_ds [rope]大法)

    Description 这些日子,可可不和卡卡一起玩了,原来可可正废寝忘食的想做一个简单而高效的文本编辑器.你能帮助他吗?为了明确任务目标,可可对“文本编辑器”做了一个抽象的定义:   文本:由0个或 ...

  2. AppBox_v2.0完整版免费下载,暨AppBox_v3.0正式发布!

    文章更新: AppBox v6.0中实现子页面和父页面的复杂交互 AppBox 是基于 FineUI 的通用权限管理框架,包括用户管理.职称管理.部门管理.角色管理.角色权限管理等模块. AppBox ...

  3. 【MySQL】花10分钟阅读下MySQL数据库优化总结

    1.花10分钟阅读下MySQL数据库优化总结http://www.kuqin.com2.扩展阅读:数据库三范式http://www.cnblogs.com3.my.ini--->C:\Progr ...

  4. 在html中添加script脚本的方法和注意事项

    在html中添加script脚本有两种方法,直接将javascript代码添加到html中与添加外部js文件,这两种方法都比较常用,大家可以根据自己需要自由选择 在html中添加<script& ...

  5. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  6. read properties

    读取配置文件在项目中使用频率很大,但是实际项目中各种人,各种用法,五花八门,往往是一种方式的各种变体,然很多种方式是其中一种方式的复杂化.今天我来总结下读取配置文件的集中方式及一些不能靠copy代码能 ...

  7. Linux配置JDK1.7和Resin4.0

    1.安装JDK1.7 (1)下载 官网下载路径:http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-18802 ...

  8. Web App 压力测试

    建议您可以在本地压测来进行评估 具体的压测方法请参考下面的链接:https://www.visualstudio.com/zh-cn/docs/test/performance-testing/run ...

  9. ContextFlyout 在10586或10240的使用

    虽然ContextFlyout只能在红石以上版本使用,但可以采用附加属性的方法手动写一个 public static class ContextFlyoutSetter { public static ...

  10. 利用django创建一个投票网站(一)

    这是教程的原始链接:http://django-intro-zh.readthedocs.io/zh_CN/latest/part1/ 创建你的第一个 Django 项目, 第一部分 来跟着实际项目学 ...