Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 9a06c3f

Browse filesBrowse files
authored
Merge pull request halfrost#2 from EyreFree/master
Update document
2 parents 7ef9bc6 + 959c799 commit 9a06c3f
Copy full SHA for 9a06c3f

File tree

2 files changed

+90
-71
lines changed
Filter options

2 files changed

+90
-71
lines changed

‎CODE_OF_CONDUCT.md

Copy file name to clipboard
+46Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Contributor Covenant Code of Conduct
2+
3+
## Our Pledge
4+
5+
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
6+
7+
## Our Standards
8+
9+
Examples of behavior that contributes to creating a positive environment include:
10+
11+
* Using welcoming and inclusive language
12+
* Being respectful of differing viewpoints and experiences
13+
* Gracefully accepting constructive criticism
14+
* Focusing on what is best for the community
15+
* Showing empathy towards other community members
16+
17+
Examples of unacceptable behavior by participants include:
18+
19+
* The use of sexualized language or imagery and unwelcome sexual attention or advances
20+
* Trolling, insulting/derogatory comments, and personal or political attacks
21+
* Public or private harassment
22+
* Publishing others' private information, such as a physical or electronic address, without explicit permission
23+
* Other conduct which could reasonably be considered inappropriate in a professional setting
24+
25+
## Our Responsibilities
26+
27+
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28+
29+
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30+
31+
## Scope
32+
33+
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34+
35+
## Enforcement
36+
37+
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at ydz627@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38+
39+
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40+
41+
## Attribution
42+
43+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44+
45+
[homepage]: http://contributor-covenant.org
46+
[version]: http://contributor-covenant.org/version/1/4/

‎README.md

Copy file name to clipboardExpand all lines: README.md
+44-71Lines changed: 44 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,69 @@
1-
# vue-objccn
1+
# Vue-ObjcCN
22

33
<p align='center'>
44
<img src='./image/vue-objccn_banner.png'>
55
</p>
66

7-
87
<p align="center">
9-
<a href="https://img.shields.io/badge/Language-%20JavaScript%20-orange.svg"><img src="https://img.shields.io/badge/Language-%20JavaScript%20-orange.svg"></a>
10-
<img src="https://img.shields.io/badge/Language-Vue.js%20-brightgreen.svg">
8+
<img src="https://img.shields.io/badge/Language-%20JavaScript%20-f9e229.svg">
9+
<img src="https://img.shields.io/badge/Framework-Vue.js%20-0eb984.svg">
1110
<img src="https://img.shields.io/badge/license-GPL-blue.svg">
12-
<a href="https://img.shields.io/badge/platform-%20iOS | Mac | Web%20-ff69b4.svg"><img src="https://img.shields.io/badge/platform-%20iOS | Mac | Web%20-ff69b4.svg"></a>
11+
<img src="https://img.shields.io/badge/platform-%20iOS | Mac | Web%20-ff69b4.svg">
1312
<img src="https://img.shields.io/badge/PR-welcome%20!-brightgreen.svg?colorA=a0cd34">
13+
<img src="https://img.shields.io/badge/made%20with-%3C3-red.svg">
1414
</p>
1515

16-
1716
利用 Vue.js 实现 [objc中国](https://objccn.io/) 的跨平台全栈应用
1817

19-
- [x] ✅桌面应用,支持 Mac、Linux、Windows 三个平台
20-
- [x] ✅Web 应用,支持 桌面浏览器 和 手机浏览器
21-
- [x] ✅手机 App,目前只支持了 Cordova 框架,支持 iOS 和 Android 两个平台
22-
- [ ] ❌手机原生 App,打算用 Weex 框架,同样一起支持 iOS 和 Android 两个平台
18+
- [x] 桌面应用,支持 Mac、Linux、Windows 三个平台
19+
- [x] Web 应用,支持 桌面浏览器 和 手机浏览器
20+
- [x] 手机 App,目前只支持了 Cordova 框架,支持 iOS 和 Android 两个平台
21+
- [ ] 手机原生 App,打算用 Weex 框架,同样一起支持 iOS 和 Android 两个平台
2322

24-
> 注:此项目纯属个人瞎搞,请大家支持 喵神(@onevcat),支持 [Objc中国](https://objccn.io/)
23+
> 注:此项目纯属个人瞎搞,请大家支持 [喵神(@onevcat)](https://github.com/onevcat),支持 [Objc中国](https://objccn.io/)
2524
2625
# 前言
2726

28-
## 一.关于我
27+
## 一. 关于我
2928

3029
我是一名全职的 iOS 开发者,非前端开发者。由于接触了 Weex 开发,从而接触到了 Vue.js。
3130

32-
## 二.为什么会写这个项目?
31+
## 二. 为什么会写这个项目?
3332

3433
1. 最开始有这个想法的时候是来自一个网友,他在我的博客上问我,网上有没有写的比较好的 demo ?我说尤大写的那个 Hacker News 是最好的。后来网友就是,楼主能写一个么?我当时回答暂时不行。其实这事我一直记在心里。
3534

36-
2. 今年5月19号,GitHub 使用 Electron 重写了 macOS 和 Windows 的客户端,加上近些年跨端开发越来越火,对于一些公司来说,Web 和 app 应该都是需要的,app 还需要 iOS 和 Android 两个平台,再有甚者还要开发小程序,桌面级的应用虽然少,但是用 Electron 一样可以一起开发了。自己也萌生了想要跃跃欲试的念头。
35+
2. 今年 5 月 19 号,GitHub 使用 Electron 重写了 macOS 和 Windows 的客户端,加上近些年跨端开发越来越火,对于一些公司来说,Web 和 app 应该都是需要的,app 还需要 iOS 和 Android 两个平台,再有甚者还要开发小程序,桌面级的应用虽然少,但是用 Electron 一样可以一起开发了。自己也萌生了想要跃跃欲试的念头。
3736

3837
3. 由于接触到了 Vue.js,当然不想停留在初级,想进阶,尤大给出了建议,就是多实践,多练。为了加快进阶的步伐,自己私下就找项目练。
3938

4039
4. 至于为何选择 Objc 中国,理由其实很简单,因为我是 iOS 开发者。在 iOS 开发者中,Objc 基本上人尽皆知(有不知道的?),喵神也基本上人尽皆知,我个人很崇拜喵神,所以就选了 Objc 中国来写。
4140

4241
5. 因为爱 ... ...
4342

44-
## 三.这次为何跨端开发没有weex
43+
## 三. 这次为何跨端开发没有 Weex
4544

4645
这次在我写完项目以后,发现 Vue 的代码直接转换成 Weex 的项目,是无法实现的,好多报错。而且不是一下子能都修复好。我相信是我使用姿势的问题,不是 Weex 的问题。对了,Weex 又发布新版本了,接下来有时间的话就把 Weex 版的也做一遍开源。
4746

4847
好了,进入正题,说项目:
4948

50-
------
51-
5249
# 技术栈和主要框架
5350

54-
📦Vue 全家桶:vue2 + vuex + vue-router + webpack
55-
📌ES6
56-
📡网络请求:axios
57-
🎈页面相应式框架:bootstrap,element-ui
58-
️后台:express
59-
📝代码高亮:highlight.js
60-
🗄数据库:lowdb
61-
📖markdown解析器:vue-markdown
62-
🔖表单验证:vee-validate
63-
🏆跨平台框架:Electron
51+
📦 Vue 全家桶:vue2 + vuex + vue-router + webpack
52+
📌 ES6
53+
📡 网络请求:axios
54+
🎈 页面相应式框架:bootstrap,element-ui
55+
️ 后台:express
56+
📝 代码高亮:highlight.js
57+
🗄 数据库:lowdb
58+
📖 Markdown解析器:vue-markdown
59+
🔖 表单验证:vee-validate
60+
🏆 跨平台框架:Electron
6461

65-
# 🔨项目构建
62+
# 🔨 项目构建
6663

67-
由于喵神的 Objc 网站是直接返回 html,所以想进行模拟网络请求返回数据,就只能自己搭建一个后台,写 api 返回数据了。
64+
由于喵神的 Objc 网站是直接返回 html,所以想进行模拟网络请求返回数据,就只能自己搭建一个后台,写 API 返回数据了。
6865

69-
我利用 Express 把后台搭建在 8081端口上,并写好路由,请求会转到8080,开启服务器的时候也会自动开启后台。
66+
我利用 Express 把后台搭建在 8081 端口上,并写好路由,请求会转到 8080,开启服务器的时候也会自动开启后台。
7067

7168

7269
我当前的开发环境是 node v6.11.0 ,npm v3.10.10,Vue.js v2.8.2
@@ -116,30 +113,33 @@ npm run build:app
116113
我在项目中放了一个 Makefile,可以根据这个来做。
117114

118115
1. 首先全局安装 cordova 命令
116+
119117
> npm install -g cordova
120118
121119
2. 再输入下面的命令,生成 app 项目目录
120+
122121
> cordova create app com.vueobjccn vueobjccn
123122
124123
3. 进入到 app 文件夹中
124+
125125
> cd app
126126
127127
4. 添加对应的平台
128+
128129
> cordova platform add ios
129130
> cordova platform add android
130131
131132
5. 运行项目
133+
132134
> cordova run ios
133135
> cordova run android
134136
135137
Cordova 只生成了一个壳的 app,里面具体的内容还是读取的网页,在生成的对应的应用里面有一个 www 的文件夹,这个文件夹里面就是要加载页面。JavaScript 打包之后是会生成 www 的文件夹,只要去替换 Cordova 对应平台里面的 www 文件夹里面的内容即可。
136138

137139
额外说几句,在 app 发展到现在这么成熟的时代,如果构建一个大的 app,用 Cordova 框架去做,不用原生,不做任何优化,用户体验确实不如原生的快。我这次就专门打包体验了 Cordova app,没有做任何优化,打包出来就用,如果是挑剔的用户,放在当今各大 app 接近完美的体验度相比来说,确实会感到满足感略低。如果真的要前端开发 app ,给2个建议,如果是用 Cordova 框架,一定要尽量优化优化,不如性能不如原生。如果想有接近原生的体验,那么可以考虑用 React Native 或者 Weex。
138140

139-
140141
# 🚀 跨平台开发
141142

142-
143143
JavaScript 跨平台开发打包成桌面级应用,主要用 Electron 框架。这里需要在 devDependencies 里面安装好 "electron"、"electron-builder"、"electron-packager" 这三个。其他的路径配置在 webpack 里面配置好即可。
144144

145145
关于 Cordova 的安装,确实可以吐槽一点网络的问题。如果你在一个翻墙环境很差的地方,真的很痛苦。比如之前在一个翻墙环境很差的情况下全局安装 Cordova ,各种报错,就算是换了 cnpm 完全安装了以后,添加 iOS 平台以后以后会报一个 co 文件找不到的问题,感觉是 cnpm 没有把命令安装完整。后来我回到家里,翻墙网络很好,npm install 一下子就安装好了。不过有个小插曲:Cordova iOS 4.4.0 template 如果报错,就多安装几次,原因还是翻墙的原因,没有 catch 到。
@@ -152,7 +152,6 @@ JavaScript 跨平台开发打包成桌面级应用,主要用 Electron 框架
152152

153153
最终打包完成会在 dist 的文件夹中。
154154

155-
156155
接下来展示一下这个跨三端的应用在各个平台下的表现:
157156

158157
先展示一下 Web 端
@@ -179,7 +178,7 @@ JavaScript 跨平台开发打包成桌面级应用,主要用 Electron 框架
179178

180179
再展示一下在手机浏览器上的效果:
181180

182-
Android平台
181+
Android 平台
183182

184183
Nexus 5x 的 Web
185184
<p align='center'>
@@ -214,7 +213,6 @@ iPad 的 Web
214213
<img src='./image/Screenshots/Web/iPad Web.png'>
215214
</p>
216215

217-
218216
接着再看看 Mac 端上的表现:
219217

220218
<p align='center'>
@@ -225,7 +223,6 @@ iPad 的 Web
225223
<img src='./image/Screenshots/Mac/Mac 2.png'>
226224
</p>
227225

228-
229226
<p align='center'>
230227
<img src='./image/Screenshots/Mac/Mac 3.png'>
231228
</p>
@@ -260,16 +257,14 @@ iPad 的 Web
260257
<img src='./image/Screenshots/iPad/iPad 3.png'>
261258
</p>
262259

263-
264-
# 🌈功能展示
260+
# 🌈 功能展示
265261

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

268264
<p align='center'>
269265
<img src='./image/Gifs/Web.gif'>
270266
</p>
271267

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

275270
<p align='center'>
@@ -280,43 +275,38 @@ iPad 的 Web
280275

281276
还有一点值得说的是,由于这是一个 SPA ,所以里面的路由都用 Router-link 实现的,而没有选用 a 标签的跳转,效果就是跳转并不用去请求数据,秒跳。这个用户体验真的很爽。
282277

283-
\<router\-link\> 比起写死的 \<a href="..."\> 会好一些,理由如下:
278+
`\<router\-link\>` 比起写死的 `\<a href="..."\>` 会好一些,理由如下:
284279

285280
无论是 HTML5 history 模式还是 hash 模式,它的表现行为一致,所以,当你要切换路由模式,或者在 IE9 降级使用 hash 模式,无须作任何变动。
286281

287282
在 HTML5 history 模式下,router-link 会拦截点击事件,让浏览器不再重新加载页面。
288283

289284
当你在 HTML5 history 模式下使用 base 选项之后,所有的 to 属性都不需要写(基路径)了。
290285

291-
292286
<p align='center'>
293287
<img src='./image/Gifs/Web-logout.gif'>
294288
</p>
295289

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

298-
299292
<p align='center'>
300293
<img src='./image/Gifs/Web-email.gif'>
301294
</p>
302295

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

305-
306298
<p align='center'>
307299
<img src='./image/Gifs/Web-buy.gif'>
308300
</p>
309301

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

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

315306
<p align='center'>
316307
<img src='./image/Gifs/Web-iPhone.gif'>
317308
</p>
318309

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

322312
<p align='center'>
@@ -337,43 +327,26 @@ iPad 上的应用
337327
<img src='./image/Gifs/Web-iPad app.gif'>
338328
</p>
339329

340-
341-
# 🤔项目完成之后的感想
330+
# 🤔 项目完成之后的感想
342331

343332
先安利一下 element-ui 这个项目,用它来搭建项目,真的很快,页面很快就可以搭建完成,开发 Vue.js 的同学一定有听过这个库。节约出来的大把时间可以把更多的精力放在业务开发上面。
344333

345334
大家都在说现在是大前端时代,移动开发和前端融合是必然。但是两个平台的开发其实还是有很多的不同,我在经历过前端的开发和 iOS 开发以后,感想还是很多的,前端和 iOS 是有很多可以相互学习的地方,两者也各有优缺点。接下来我打算写写这些方面的系列文章。前端的工程化,组件化,路由,MVVM,分别和 iOS 这边各有哪些优缺点,相互可以学习些什么。(感觉给自己挖了一个大坑)
346335

347-
348-
# 📜Feature
349-
336+
# 📜 Feature
350337

351338
有时间就支持 Weex ,把这个 Vue.js 的改成一个完整的 Weex 的应用,变成原生以后,性能一定不会差。这样跨平台开发就应该全了。
352339

353-
354-
355-
# ❗️勘误
356-
340+
# ❗️ 勘误
357341

358342
如果在项目中发现了有什么不解或者发现了 bug,欢迎提交 PR 或者 issue,欢迎大神们多多指点小弟🙏🙏🙏
359343

344+
# ♥️ 感谢
360345

346+
如果喜欢这个项目,欢迎 Star!
361347

362-
# ♥️感谢
363-
364-
365-
如果喜欢这个项目,欢迎Star!
366-
367-
368-
369-
------
370-
371-
# 🌏LICENSE
372-
373-
GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007
374-
375-
Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
376-
Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed.
377-
348+
# 🌏 LICENSE
378349

350+
![](https://www.gnu.org/graphics/gplv3-127x51.png)
379351

352+
Vue-ObjcCN is available under the GPLv3 license. See the LICENSE file for more info.

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.