Build a Web page with Vue.js quickly.

<p align='center'>

</p>

Vuex management status is very convenient. Login status saved in the state inside, the global object will be obtained it.

<p align='center'>

</p>

If there is no login in information and user click the purchase button to buy an e-book, it will jump to the login page.

When you are using the base option in HTML5 history mode, you don't need to include it in to prop's URLs.

<p align='center'>

</p>

Similarly, once the user logs out, all places showing the user name will become a status to be logged in, the shopping cart on navigationBar also be disappeared. Manage status with Vuex, very exciting.

<p align='center'>

</p>

This is the email form validation, not too much technical content.

<p align='center'>

</p>

Here is the shopping cart page and use the MVVM page binding ideas. There are four buttons on the page, clicking any one will immediately change the related total price. To iOSer, it's worthy to learn the implemention on the MVVM.

Then this is the iPhone's Safari performance, the speed is well.

<p align='center'>

</p>

In the cross-platform of these applications, the best experience, I think, is the application of Mac.

<p align='center'>

</p>

Finally is the mobile phone app build by Cordova framework, I'm a little picky and not satificated with the unoptimized Cordova. See this showcase below:

iPhone application

<p align='center'>

</p>

iPad application

<p align='center'>

</p>

用 Vue.js 搭建一个 Web 页面很快。

<p align='center'>

</p>

看看 Vuex 管理状态的方便。登录状态保存在 state 里面，全局都会获取到。

<p align='center'>

</p>

一旦用户没有登录，点击购买电子书的时候，判断没有用户登录都会跳转到登录页面。

当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。

<p align='center'>

</p>

登出页面同理，一旦用户登出，所有显示用户名的地方都会变成登录，navigationBar 上的购物车也一并消失。用 Vuex 管理状态，挺好的。

<p align='center'>

</p>

这就是 email 的表单验证了，没有太多的技术含量。

<p align='center'>

</p>

这里是购物车页面，这里用到了 MVVM 页面的绑定的思想，页面上 4 个按钮，点任意一个按钮都会立即改变下面的总价。关于 Vue.js 的 MVVM 实现思想值得 iOSer 们学习。

接下来这个是 iPhone 的 Safari 上的表现，速度还可以。

<p align='center'>

</p>

在跨平台的这几个应用中，体验最好的，我觉得还是 Mac 的应用。使用起来满意度非常高。

<p align='center'>

</p>

最后就是 Cordova 框架搭建的 手机 app，体验度不高，具体如何，看图吧，总之不优化的 Cordova ，对于挑剔的我来说，我是不满意的。

iPhone 上的应用

<p align='center'>

</p>

iPad 上的应用

<p align='center'>

</p>