<img src="https://img.shields.io/badge/made%20with-%3C3-red.svg">

</p>

- [x] ✅ Desktop applications, support Mac, Linux, Windows three platforms

- [x] ✅ Web applications, support for desktop browsers and mobile browsers

- [x] ✅ Mobile App, currently only supports the Cordova framework, support iOS、Android、Windows Phone、BlackBerry four platforms

- [ ] ❌ Mobile phone native App, intended to use Weex framework, the same support for both iOS and Android platform

<p align='center'>

<img src='./image/Supported_Platforms_.png'>

</p>

1. At the beginning of this idea is from a netizen, he asked me in my blog, the Internet has not a better Weex demo? I said that [@EVAN YOU](http://evanyou.me/)’s Hacker News is the best. Later netizen say, the bloggers can write one? I did not answer at the time. In fact, this thing I have always remember in my heart.

3. As a result of the contact to the Vue.js, of course, do not want to stay in the primary, would like to advanced, [@EVAN YOU](http://evanyou.me/) especially given the recommendations, is more practice, more practice. In order to speed up the pace of progress, I own private to find the project for practicing.

4. As for why to choose Objc China, the reason is actually very simple, because I am an iOS developer. In iOS developers, Objc is basically well known (do not know?), [喵神(@onevcat)](https://github.com/onevcat) is basically well known, I personally worship [喵神(@onevcat)](https://github.com/onevcat), so I chose Objc China to write.

5. Because of love ... ...

After I finished the project, found that Vue code directly converted to Weex project, can not be achieved, a lot of error. And not all of them can be repaired immediately. I believe that I use the wrong way, not Weex's problem. By the way, Weex has released a new version, and then there is time to put Weeks version of the open source again.

Well, into the topic, Let's introduce this project:

📦 All technology stack of Vue：vue2 + vuex + vue-router + webpack

📌 ES6

🔖 Form validation：vee-validate

🏆 Cross-platform framework：Electron

Due to Objc china website is directly response html data, so I want to simulate the network request to return data, should build a server, write API return data.

I use Express framework to build a server, set up in the 8081 port, and write routing, the request will go to 8080, open the server will automatically open the background.

My current development environment is node v6.11.0 ，npm v3.10.10，Vue.js v2.8.2.

``` bash

Here to talk about Cordova's packaging alone, it is slightly more than the desktop side of the special point.

I put a Makefile in the project, you can do this according to this.

1. First install the cordova command globally

2. And then enter the following command to generate the app project directory

3. Into the app folder

4. Add the corresponding platform

5. Run the project

Cordova only generated a shell of the app, inside the specific content still read the webpage, in the corresponding application which has a www inside the folder, this folder is to load the page inside. JavaScript package will generate the www folder, just replace the content which inside the Cordova corresponding platform’s www folder.

Add a few words, app development to the present so mature era, if you develop a large app, with Cordova framework to do, do not use Objective-C or Swift to develop, do not do any optimization, the user experience is really not as good as the native fast. I have a special package to experience the Cordova app, did not do any optimization, packaged out on the experience, if it is critical of the user, on the current major app close to the perfect experience compared to really do not feel a little sense of satisfaction. If you really want to use front-end technology development app, to give 2 recommendations, if it is Cordova framework, we must try to optimize it, otherwise, the performance of app is not as good as the native performance. If you want to have a close to the native experience, then you can consider using React Native or Weex.

JavaScript cross-platform development packaged into desktop applications, mainly use the Electron framework. Here you need to install the devdependencies inside "electron", "electron-builder", "electron-packager" these three framework. Make sure the other path configuration in the webpack have configured completed.

First show the Web side:

<p align='center'>

<img src='./image/Screenshots/Web/Web 1.png'>

</p>

Android platform

Nexus 5x Web

<p align='center'>

<img src='./image/Screenshots/Web/Nexus 5x Web.png'>

</p>

Nexus 6P Web

<p align='center'>

<img src='./image/Screenshots/Web/Nexus 6P Web.png'>

</p>

iOS platform

iPhone 5 Web

<p align='center'>

<img src='./image/Screenshots/Web/iPhone 5 Web.png'>

</p>

iPhone 7 Web

<p align='center'>

<img src='./image/Screenshots/Web/iPhone 7 Web.png'>

</p>

iPhone 7 Plus Web

<p align='center'>

<img src='./image/Screenshots/Web/iPhone 7 Plus Web.png'>

</p>

<img src='./image/Screenshots/iPad/iPad 3.png'>

</p>

Build a Web page with Vue.js quickly.

<img src='./image/Gifs/Web-login.gif'>

</p>

Once the user is not logged in, click on the purchase of e-books, to determine no user login will jump to the login page.

Another point is to say that because this is a SPA, so the routing inside are using Router-link to achieve, but did not use `<a>` tag jump, the effect is to jump and do not have to request data, jump quickly. This user experience is really cool.

Log out of the page Similarly, once the user logs out, all show 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'>

<img src='./image/Gifs/Web-email.gif'>

</p>

In the cross-platform of these applications, the best experience, I think it is the application of Mac. Use satisfaction is very high.

<p align='center'>

<img src='./image/Gifs/Web-Mac.gif'>

</p>

Finally Cordova framework build the mobile phone app, experience is unsatisfactory, in short, not optimized Cordova, for picky me, I was not satisfied. See this showcase below:

iPhone application

<p align='center'>

<img src='./image/Gifs/Web-iPad app.gif'>

</p>

First Amway [element-ui](https://github.com/ElemeFE/element) this project, use it to build the project, really very fast, a app can be efficient development. the development of Vue.js students must have heard of this library. Saving a lot of time can put more energy on business development.

Everyone is saying that now is a large front-end era, mobile development and front-end integration is inevitable. But the development of the two platforms is still a lot of different, I experienced a front-end development and iOS development, thinking a lot, front-end and iOS are a lot of places to learn from each other, both have their own advantages and disadvantages. Then I intend to write a series of articles on these aspects. The engineering, component, routing, MVVM of front-end, respectively, and iOS where the advantages and disadvantages of each other, what can learn each other. (Feeling to dig a big pit)

If I have free time, I want to support Weex, take Vue.js into a complete Weex application, become native app, the performance will not be bad. So cross-platform development should be the whole platform.

If you like this project, welcome Star!