{"id":13512534,"url":"https://github.com/halfrost/vue-objccn","last_synced_at":"2025-05-15T17:01:45.969Z","repository":{"id":40516415,"uuid":"94674661","full_name":"halfrost/vue-objccn","owner":"halfrost","description":"🔥 Use Vue.js to develop a cross-platform full stack application / 用 Vue.js 开发的跨三端应用","archived":false,"fork":false,"pushed_at":"2022-05-04T06:11:40.000Z","size":67016,"stargazers_count":1999,"open_issues_count":1,"forks_count":328,"subscribers_count":75,"default_branch":"master","last_synced_at":"2025-03-31T20:11:27.768Z","etag":null,"topics":["android-cordova-app","cordova","cordova-application","cordova-ios","ecmascript6","electron","electron-app","electron-application","electron-builder","electron-vue","javascript","objc","vue","vue-cli","vue-components","vue-router","vue2","vuejs","vuejs2","vuex"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/halfrost.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["halfrost"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2017-06-18T08:23:38.000Z","updated_at":"2025-03-27T06:55:01.000Z","dependencies_parsed_at":"2022-07-26T08:48:00.127Z","dependency_job_id":null,"html_url":"https://github.com/halfrost/vue-objccn","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halfrost%2Fvue-objccn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halfrost%2Fvue-objccn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halfrost%2Fvue-objccn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halfrost%2Fvue-objccn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halfrost","download_url":"https://codeload.github.com/halfrost/vue-objccn/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247730069,"owners_count":20986404,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android-cordova-app","cordova","cordova-application","cordova-ios","ecmascript6","electron","electron-app","electron-application","electron-builder","electron-vue","javascript","objc","vue","vue-cli","vue-components","vue-router","vue2","vuejs","vuejs2","vuex"],"created_at":"2024-08-01T03:01:59.780Z","updated_at":"2025-04-07T21:15:45.616Z","avatar_url":"https://github.com/halfrost.png","language":"Vue","readme":"\u003cp align='center'\u003e\n\u003cimg src='./image/vue-objccn_banner_.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg alt=\"GitHub All Releases\" src=\"https://img.shields.io/github/downloads/halfrost/vue-objccn/total?label=APP%20downloads\u0026color=brightgreen\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/build-passing-success\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/Language-%20JavaScript%20-f9e229.svg\"\u003e\n\u003ca href=\"https://github.com/vuejs/vue\"\u003e\u003cimg src=\"https://img.shields.io/badge/Framework-Vue.js | Electron%20-0eb984.svg\"\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/node-\u003e=v6.11.0-b561fe.svg\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/npm-\u003e=v3.10.10-000000.svg\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/electron-\u003e=1.8.8-orange.svg\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/platform-%20iOS | Android | Mac | Web%20-ff69b4.svg\"\u003e\n\u003cimg src=\"https://visitor-badge.laobi.icu/badge?page_id=halfrost.vue-objccn\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/halfrost/vue-objccn/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-GPL-blue.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://halfrost.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/Blog-Halfrost--Field-80d4f9.svg?style=flat\"\u003e\u003c/a\u003e\n\u003ca href=\"http://weibo.com/halfrost\"\u003e\u003cimg src=\"https://img.shields.io/badge/weibo-@halfrost-f974ce.svg?style=flat\u0026colorA=f4292e\"\u003e\u003c/a\u003e\n\u003ca href=\"https://twitter.com/halffrost\"\u003e\u003cimg src=\"https://img.shields.io/badge/twitter-@halffrost-F8E81C.svg?style=flat\u0026colorA=009df2\"\u003e\u003c/a\u003e\n\u003ca href=\"https://www.zhihu.com/people/halfrost/activities\"\u003e\u003cimg src=\"https://img.shields.io/badge/%E7%9F%A5%E4%B9%8E-@halfrost-fd6f32.svg?style=flat\u0026colorA=0083ea\"\u003e\u003c/a\u003e\n\u003cimg src=\"https://img.shields.io/badge/made%20with-=1-red.svg\"\u003e\n\u003ca href=\"https://github.com/halfrost/vue-objccn/pulls\"\u003e\u003cimg src=\"https://img.shields.io/badge/PR-Welcome-brightgreen.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nUse Vue.js to develop a cross-platform full stack application of [Objc china](https://objccn.io/).\n    \n- [x] ✅ Desktop application available for three platforms, Mac, Linux and Windows \n- [x] ✅ Web application supports desktop browsers and mobile browsers\n- [x] ✅ Mobile App which uses the Cordova framework, supports iOS, Android, Windows Phone and BlackBerry platforms\n- [ ] ❌ Native Mobile App, which can use Weex framework to support both iOS and Android\n\n\u003e Note: This project is just a bit of fun and purely for learning purpose, please support [喵神(@onevcat)](https://github.com/onevcat) and [Objc china](https://objccn.io/).  \n\n\n\u003e [Chinese introduction](./README_CN.md)\n\nThe download link for the runnable and complete packaged software is [here](https://github.com/halfrost/vue-objccn/releases).\n\n\n## Preface\n\n### 1. About me\n\nI'm a full-time iOS developer, not a front-end developer. Due to take part in Weex development, I get to know the `Vue.js`.\n\n### 2. Why write this project？\n\n1. The motivation to write this project is from an e-pal, he left a message on my blog - was there a better Weex demo?  I recommended [@EVAN YOU](http://evanyou.me/)’s Hacker News. Later he supposed me to make one. I refused but kept it in mind.\n\n2. On May 19 this year, GitHub used Electron rewrite the macOS and Windows client, coupled with the recent year development of cross-platform getting hotter, to some companies, Web and app are all needed, app also need support iOS and Android two platforms, and more they develop Weixin mini programs. Although desktop applications are a few, Electron can develop them all. I'm going to have a try.\n\n3. 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.\n\n4. Why choose Objc China, the reason is typically simple - I am an iOS developer. To iOS developers, Objc is basically well known, [喵神(@onevcat)](https://github.com/onevcat) as the same. I admire him very much [喵神(@onevcat)](https://github.com/onevcat) and decide to write Objc china without hesitation.\n\n5. Because of love ... ...\n\n### 3. Why not use Weex to build this cross-platform project？\n\nWhen I completed the project and tried to convert it directly into Weex, I got a lot of errors and most of them cannot be fixed 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 Weex version of the open source again.\n\nWell, into the topic, Let's introduce this project:\n\n## Technology stack \u0026 main framework\n\n📦 All technology stack of Vue：vue2 + vuex + vue-router + webpack  \n📌 ES6     \n📡 Network request：axios  \n🎈 Response framework：bootstrap, element-ui  \n✏️ Backend：express  \n📝 Code highlighted：highlight.js  \n🗄 Database：lowdb  \n📖 Markdown Parser：vue-markdown  \n🔖 Form validation：vee-validate  \n🏆 Cross-platform framework：Electron  \n\n## 📱 Supported platforms\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Supported_Platforms_.png'\u003e\n\u003c/p\u003e\n\n## 🔨 How to build \n\nAs the Objc china website is directly response html data, to simulate the network request to return data, I build a backend and write API to return data.\n\nI 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.\n\nMy current development environment is node v6.11.0, npm v3.10.10, Vue.js v2.8.2.\n\n``` bash\n\n# install dependencies \nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# serve with hot reload at localhost:8080\nnpm run start\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run unit tests\nnpm run unit\n\n# run e2e tests\nnpm run e2e\n\n# run all tests\nnpm test\n\n# build Mac application\nnpm run build:mac\n\n# build Linxu application\nnpm run build:linux\n\n# build Win application\nnpm run build:win\n\n# build Cordova application\nnpm run build:app\n\n```\n\nHere to talk about Cordova's packaging alone, it is slightly more than the desktop side of the special point.\n\nFirst, make the `src/main.js` file on the three lines on the Cordova note open, Cordova library initialization needs to be included in the generation of Vue instance outside. After opening the comment, proceed to the next step.\n\nI put a `Makefile` in the project, you can do this according to this.\n\n1. First install the cordova command globally\n\n\u003e npm install -g cordova \n\n2. And then enter the following command to generate the app project directory\n\n\u003e cordova create app com.vueobjccn vueobjccn\n\n3. Into the app folder\n\n\u003e cd app\n\n4. Add the corresponding platform\n\n\u003e cordova platform add ios  \n\u003e cordova platform add android\n\n5. Run the project\n\n\u003e cordova run ios  \n\u003e cordova run android\n\nCordova only generated a shell of the app, all the content are still read from the web page. There is a folder called `WWW` in the corresponding application and used to load the page. JavaScript package will generate the `www` folder, just replace the content under this folder.\n\nIn addition, if you develop a large app with Cordova framework and no any optimization, the user experience is really not as fast as the native. If you really want to use front-end technology to develop app, share you two recommendation: The one is trying to do optimization when use Cordova framework. The other is using React Native or Weex to get the experience close to native.\n\n## 🚀 Cross-platform development\n\nPackage this project into desktop application by JavaScript cross-platform development, mainly used the Electron framework. Here you need to install these three dependencies \"electron\", \"electron-builder\" and \"electron-packager\" in devDependencies. Configure other paths in the webpack.\n\nAbout Cordova installation, I make complaints a little network problems in China. If you are not over the wall in China, it is really painful. For example, not over the wall and in a very poor network environment, installation of Cordova globally, lots of error, even for the complete installation of `cnpm` after the addition of the iOS platform will later report a problem of 'co' file can not find, I suspect `cnpm` could not install the command complete. Later, I go back home, over the wall and network environment is very good, All of a sudden the `npm` installation is complete. But there is a small episode: If Cordova iOS 4.4.0 template throw a error, suggest installation of several times, the reason is still for the network over the wall in China, no catch to it.\n\nThere may be encountered the following error:\n\n\u003e \"Error: Cannot find module 'config-chain'\" when running 'ionic start'\n\nThe solution of this error is trying again the original order with the `sudo` command. This error could be solved\n\nThe final package will be done in the dist folder.\n\nNext to show the performance of the cross-platform application on each platform:\n\nFirst show the Web side:\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/Web 1.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/Web 2.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/Web 3.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/Web 4.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/Web 5.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/Web 6.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/Web 7.png'\u003e\n\u003c/p\u003e\n\nAnd then show the effect in the mobile browser:\n\nAndroid platform\n\nNexus 5x Web\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/Nexus 5x Web.png'\u003e\n\u003c/p\u003e\n\nNexus 6P Web\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/Nexus 6P Web.png'\u003e\n\u003c/p\u003e\n\niOS platform\n\niPhone 5 Web\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/iPhone 5 Web.png'\u003e\n\u003c/p\u003e\n\niPhone 7 Web\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/iPhone 7 Web.png'\u003e\n\u003c/p\u003e\n\niPhone 7 Plus Web\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/iPhone 7 Plus Web.png'\u003e\n\u003c/p\u003e\n\niPad Web\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Web/iPad Web.png'\u003e\n\u003c/p\u003e\n\nThen look at the performance in Mac side:\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Mac/Mac 1.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Mac/Mac 2.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Mac/Mac 3.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Mac/Mac 4.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Mac/Mac 5.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/Mac/Mac 6.png'\u003e\n\u003c/p\u003e\n\nFinally look at Cordova's effect:\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/iPhone/iPhone 1.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/iPhone/iPhone 2.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/iPhone/iPhone 3.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/iPad/iPad 1.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/iPad/iPad 2.png'\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Screenshots/iPad/iPad 3.png'\u003e\n\u003c/p\u003e\n\n## 🌈 Function display\n\nBuild a Web page with Vue.js quickly.\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Gifs/Web.gif'\u003e\n\u003c/p\u003e\n\nVuex management status is very convenient. Login status saved in the state inside, the global object will be obtained it.\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Gifs/Web-login.gif'\u003e\n\u003c/p\u003e\n\nIf there is no login in information and user click the purchase button to buy an e-book, it will jump to the login page. \n\nAnother point is to say that because this is a SPA, so the routing inside are using Router-link to achieve, but did not use `\u003ca\u003e` tag jump, the effect is to jump and do not have to request data, jump quickly. This user experience is really cool.\n\n`\u003crouter-link\u003e` is preferred over hard-coded `\u003ca href=\"...\"\u003e` for the following reasons:\n\nIt works the same way in both HTML5 history mode and hash mode, so if you ever decide to switch mode, or when the router falls back to hash mode in IE9, nothing needs to be changed.\n\nIn HTML5 history mode, router-link will intercept the click event so that the browser doesn't try to reload the page.\n\nWhen you are using the base option in HTML5 history mode, you don't need to include it in to prop's URLs.\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Gifs/Web-logout.gif'\u003e\n\u003c/p\u003e\n\nSimilarly, 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.\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Gifs/Web-email.gif'\u003e\n\u003c/p\u003e\n\nThis is the email form validation, not too much technical content.\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Gifs/Web-buy.gif'\u003e\n\u003c/p\u003e\n\nHere 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.\n\nThen this is the iPhone's Safari performance, the speed is well.\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Gifs/Web-iPhone.gif'\u003e\n\u003c/p\u003e\n\nIn the cross-platform of these applications, the best experience, I think, is the application of Mac. \n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Gifs/Web-Mac.gif'\u003e\n\u003c/p\u003e\n\nFinally 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:\n\niPhone application\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Gifs/Web-iPone app.gif'\u003e\n\u003c/p\u003e\n\niPad application\n\n\u003cp align='center'\u003e\n\u003cimg src='./image/Gifs/Web-iPad app.gif'\u003e\n\u003c/p\u003e\n\n## 🤔 Reflection\n\nI strongly recommand you the [element-ui](https://github.com/ElemeFE/element) (Vue.js developers must have heard of this library). It is a really fast way to build projects by using it, an app can be efficient developed. Save time and put more energy on business development.\n\nEveryone says \"Now is in the era of front-end, mobile development and front-end integration is inevitable\". But there are many different aspectes of the development between front-end and iOS, I experience them all and think a lot. Font-end and iOS, they have lots to learn from each other in their own advantages and disadvantages, I intend to write an article series on those aspects - engineering, component, routing, MVVM. (Dig a big hole to jump)\n\n## 📜 Feature\n\nIf I had more free time, I would like to support Weex. Taking Vue.js into a complete Weex application, to become a native app, the performance will not be bad. After then, it can cover the entire platform.\n\n## ❗️ Errata\n\nIf you find a bug, welcome to sumbit your PR.  \nIf you feel confused by something, welcome to submit your Issues.    \nI'm really appreciate it！🙏🙏🙏\n\n## ♥️ Thanks\n\nIf you like this project, welcome Star!\n\n\n[![Stargazers over time](https://starchart.cc/halfrost/vue-objccn.svg)](https://starchart.cc/halfrost/vue-objccn)\n\n\n\n## 🌏 LICENSE\n\n![](https://www.gnu.org/graphics/gplv3-127x51.png)\n\nVue-ObjcCN is available under the GPLv3 license. See the LICENSE file for more info.\n","funding_links":["https://github.com/sponsors/halfrost"],"categories":["Vue"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalfrost%2Fvue-objccn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalfrost%2Fvue-objccn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalfrost%2Fvue-objccn/lists"}