Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Model Center   Code  
»áÔ±   
   
 
     
   
 ¶©ÔÄ
  ¾èÖú
Vue È«¼ÒͰ + Electron ¿ª·¢µÄÒ»¸ö¿çÈý¶ËµÄÓ¦ÓÃ
 
×÷Õߣºß÷Éñ
  2397  次浏览      28
  2020-3-20
 
±à¼­ÍƼö:
±¾ÎÄÖ÷Òª½éÉÜÈçºÎÀûÓà Vue.jsµÄ¿ò¼ÜElectronʵÏÖ objcÖйú µÄ¿çƽ̨ȫջӦÓÃÒÔ¼°ÏîÄ¿´î½¨µÄÏêϸ½éÉÜ£¬Ï£Íû¶ÔÄúÄÜÓÐËù°ïÖú¡£
±¾ÎÄÀ´×ÔÓÚHalfros£¬,ÓÉ»ðÁú¹ûÈí¼þAlice±à¼­ÍƼö¡£

ǰÑÔ

Ò».Ϊʲô»áдÕâ¸öÏîÄ¿£¿

×ʼÓÐÕâ¸öÏë·¨µÄʱºòÊÇÀ´×ÔÒ»¸öÍøÓÑ£¬ËûÔÚÎҵIJ©¿ÍÉÏÎÊÎÒ£¬ÍøÉÏÓÐûÓÐдµÄ±È½ÏºÃµÄ Weex demo £¿ÎÒ˵ÓÈ´óдµÄÄǸö Hacker News ÊÇ×îºÃµÄ¡£ºóÀ´ÍøÓѾÍ˵£¬Â¥Ö÷ÄÜдһ¸öô£¿ÎÒµ±Ê±»Ø´ðÔÝʱ²»ÐС£ÆäʵÕâÊÂÎÒÒ»Ö±¼ÇÔÚÐÄÀï¡£

½ñÄê5ÔÂ19ºÅ£¬GitHub ʹÓà Electron ÖØÐ´ÁË macOS ºÍ Windows µÄ¿Í»§¶Ë£¬¼ÓÉϽüЩÄê¿ç¶Ë¿ª·¢Ô½À´Ô½»ð£¬¶ÔÓÚһЩ¹«Ë¾À´Ëµ£¬Web ºÍ app Ó¦¸Ã¶¼ÊÇÐèÒªµÄ£¬app »¹ÐèÒª iOS ºÍ Android Á½¸öƽ̨£¬ÔÙÓÐÉõÕß»¹Òª¿ª·¢Ð¡³ÌÐò£¬×ÀÃæ¼¶µÄÓ¦ÓÃËäÈ»ÉÙ£¬µ«ÊÇÓà Electron Ò»Ñù¿ÉÒÔÒ»Æð¿ª·¢ÁË¡£×Ô¼ºÒ²ÃÈÉúÁËÏëÒªÔ¾Ô¾ÓûÊÔµÄÄîÍ·¡£

ÓÉÓÚ½Ó´¥µ½ÁË Vue.js£¬µ±È»²»ÏëÍ£ÁôÔÚ³õ¼¶£¬Ïë½ø½×£¬ÓÈ´ó¸ø³öÁ˽¨Ò飬¾ÍÊǶàʵ¼ù£¬¶àÁ·¡£ÎªÁË¼Ó¿ì½ø½×µÄ²½·¥£¬×Ô¼ºË½Ï¾ÍÕÒÏîÄ¿Á·¡£

ÖÁÓÚΪºÎÑ¡Ôñ Objc Öйú£¬ÀíÓÉÆäʵºÜ¼òµ¥£¬ÒòΪÎÒÊÇ iOS ¿ª·¢Õß¡£ÔÚ iOS ¿ª·¢ÕßÖУ¬Objc »ù±¾ÉÏÈ˾¡½ÔÖª£¨Óв»ÖªµÀµÄ£¿£©£¬ß÷ÉñÒ²»ù±¾ÉÏÈ˾¡½ÔÖª£¬ÎÒ¸öÈ˺ܳç°Ýß÷Éñ£¬ËùÒÔ¾ÍÑ¡ÁË Objc ÖйúÀ´Ð´¡£

ÒòΪ°® ... ...

¶þ.Õâ´ÎΪºÎ¿ç¶Ë¿ª·¢Ã»ÓÐweex£¿

Õâ´ÎÔÚÎÒдÍêÏîÄ¿ÒԺ󣬷¢ÏÖ Vue µÄ´úÂëÖ±½Óת»»³É Weex µÄÏîÄ¿£¬ÊÇÎÞ·¨ÊµÏֵģ¬ºÃ¶à±¨´í¡£¶øÇÒ²»ÊÇÒ»ÏÂ×ÓÄܶ¼ÐÞ¸´ºÃ¡£ÎÒÏàÐÅÊÇÎÒʹÓÃ×ËÊÆµÄÎÊÌ⣬²»ÊÇ Weex µÄÎÊÌâ¡£¶ÔÁË£¬Weex ÓÖ·¢²¼Ð°汾ÁË£¬½ÓÏÂÀ´ÓÐʱ¼äµÄ»°¾Í°Ñ Weex °æµÄÒ²×öÒ»±é¿ªÔ´¡£

ºÃÁË£¬½øÈëÕýÌ⣬˵ÏîÄ¿£º

¼¼ÊõÕ»ºÍÖ÷Òª¿ò¼Ü

1.Vue È«¼ÒͰ£ºvue2 + vuex + vue-router + webpack

2.ES6

3.ÍøÂçÇëÇó£ºaxios

4.Ò³ÃæÏàӦʽ¿ò¼Ü£ºbootstrap£¬element-ui

5.ºǫ́£ºexpress

6.´úÂë¸ßÁÁ£ºhighlight.js

7.Êý¾Ý¿â£ºlowdb

8.markdown½âÎöÆ÷£ºvue-markdown

9.±íµ¥ÑéÖ¤£ºvee-validate

10.¿çƽ̨¿ò¼Ü£ºElectron

ÏîÄ¿¹¹½¨

ÓÉÓÚß÷ÉñµÄ Objc ÍøÕ¾ÊÇÖ±½Ó·µ»Ø html£¬ËùÒÔÏë½øÐÐÄ£ÄâÍøÂçÇëÇó·µ»ØÊý¾Ý£¬¾ÍÖ»ÄÜ×Ô¼º´î½¨Ò»¸öºǫ́£¬Ð´ api ·µ»ØÊý¾ÝÁË¡£

ÎÒÀûÓà Express °Ñºǫ́´î½¨ÔÚ 8081¶Ë¿ÚÉÏ£¬²¢Ð´ºÃ·ÓÉ£¬ÇëÇó»áתµ½8080£¬¿ªÆô·þÎñÆ÷µÄʱºòÒ²»á×Ô¶¯¿ªÆôºǫ́¡£

# install dependencies °²×°ÒÀÀµ
npm install
# serve with hot reload at localhost:8080
npm run dev
# serve with hot reload at localhost:8080
npm run start
# build for production with minification ´ò°ü
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
# ´ò°ü Mac Ó¦ÓÃ
npm run build:mac
# ´ò°ü Linux Ó¦ÓÃ
npm run build:linux
# ´ò°ü Win Ó¦ÓÃ
npm run build:win
# ´ò°ü Cordova Ó¦ÓÃ
npm run build:app

ÕâÀïÒªµ¥¶À˵һÏ Cordova µÄ´ò°ü·½Ê½£¬Ëü±È×ÀÃæ¶ËµÄÉÔÎ¢ÌØÊâÒ»µã¡£

Ê×Ï顄 src/main.js ÎļþÖйØÓÚ Coredova µÄÈýÐÐ×¢ÊÍ´ò¿ª£¬Coredova ¿âµÄ³õʼ»¯ÐèÒª°üÔÚÉú³É Vue ʵÀý µÄÍâÃæ¡£´ò¿ª×¢ÊÍÒÔºó£¬ÔÙÖ´ÐнÓÏÂÀ´µÄ²½Öè¡£

ÎÒÔÚÏîÄ¿ÖзÅÁËÒ»¸ö Makefile£¬¿ÉÒÔ¸ù¾ÝÕâ¸öÀ´×ö¡£

1.Ê×ÏÈÈ«¾Ö°²×° cordova ÃüÁî

npm install -g cordova

2.ÔÙÊäÈëÏÂÃæµÄÃüÁÉú³É app ÏîĿĿ¼

cordova create app com.vueobjccn vueobjccn

½øÈëµ½ app Îļþ¼ÐÖÐ

cd app

Ìí¼Ó¶ÔÓ¦µÄƽ̨

cordova platform add ios
cordova platform add android

ÔËÐÐÏîÄ¿

cordova run ios
cordova run android

Cordova Ö»Éú³ÉÁËÒ»¸ö¿ÇµÄ app£¬ÀïÃæ¾ßÌåµÄÄÚÈÝ»¹ÊǶÁÈ¡µÄÍøÒ³£¬ÔÚÉú³ÉµÄ¶ÔÓ¦µÄÓ¦ÓÃÀïÃæÓÐÒ»¸ö www µÄÎļþ¼Ð£¬Õâ¸öÎļþ¼ÐÀïÃæ¾ÍÊÇÒª¼ÓÔØÒ³Ãæ¡£JavaScript ´ò°üÖ®ºóÊÇ»áÉú³É www µÄÎļþ¼Ð£¬Ö»ÒªÈ¥Ìæ»» Cordova ¶ÔӦƽ̨ÀïÃæµÄ www Îļþ¼ÐÀïÃæµÄÄÚÈݼ´¿É¡£

¶îÍâ˵¼¸¾ä£¬ÔÚ app ·¢Õ¹µ½ÏÖÔÚÕâô³ÉÊìµÄʱ´ú£¬Èç¹û¹¹½¨Ò»¸ö´óµÄ app£¬Óà Cordova ¿ò¼ÜÈ¥×ö£¬²»ÓÃÔ­Éú£¬²»×öÈκÎÓÅ»¯£¬Óû§ÌåÑéȷʵ²»ÈçÔ­ÉúµÄ¿ì¡£ÎÒÕâ´Î¾ÍרÃÅ´ò°üÌåÑéÁË Cordova app£¬Ã»ÓÐ×öÈκÎÓÅ»¯£¬´ò°ü³öÀ´¾ÍÓã¬Èç¹ûÊÇÌôÌÞµÄÓû§£¬·ÅÔÚµ±½ñ¸÷´ó app ½Ó½üÍêÃÀµÄÌåÑé¶ÈÏà±ÈÀ´Ëµ£¬È·Êµ»á¸Ðµ½Âú×ã¸ÐÂԵ͡£Èç¹ûÕæµÄҪǰ¶Ë¿ª·¢ app £¬¸ø2¸ö½¨Ò飬Èç¹ûÊÇÓà Cordova ¿ò¼Ü£¬Ò»¶¨Òª¾¡Á¿ÓÅ»¯ÓÅ»¯£¬²»È»ÐÔÄܲ»ÈçÔ­Éú¡£Èç¹ûÏëÓнӽüÔ­ÉúµÄÌåÑ飬ÄÇô¿ÉÒÔ¿¼ÂÇÓà React Native »òÕß Weex¡£

¿çƽ̨¿ª·¢

JavaScript ¿çƽ̨¿ª·¢´ò°ü³É×ÀÃæ¼¶Ó¦Óã¬Ö÷ÒªÓà Electron ¿ò¼Ü¡£ÕâÀïÐèÒªÔÚ devDependencies ÀïÃæ°²×°ºÃ "electron"¡¢"electron-builder"¡¢"electron-packager" ÕâÈý¸ö¡£ÆäËûµÄ·¾¶ÅäÖÃÔÚ webpack ÀïÃæÅäÖúü´¿É¡£

¹ØÓÚ Cordova µÄ°²×°£¬È·Êµ¿ÉÒÔͲÛÒ»µãÍøÂçµÄÎÊÌâ¡£Èç¹ûÄãÔÚÒ»¸ö·­Ç½»·¾³ºÜ²îµÄµØ·½£¬ÕæµÄºÜÍ´¿à¡£±ÈÈç֮ǰÔÚÒ»¸ö·­Ç½»·¾³ºÜ²îµÄÇé¿öÏÂÈ«¾Ö°²×° Cordova £¬¸÷ÖÖ±¨´í£¬¾ÍËãÊÇ»»ÁË cnpm ÍêÈ«°²×°ÁËÒÔºó£¬Ìí¼Ó iOS ƽ̨ÒÔºóÒÔºó»á±¨Ò»¸ö co ÎļþÕÒ²»µ½µÄÎÊÌ⣬¸Ð¾õÊÇ cnpm ûÓаÑÃüÁî°²×°ÍêÕû¡£ºóÀ´Îһص½¼ÒÀ·­Ç½ÍøÂçºÜºÃ£¬npm install Ò»ÏÂ×ӾͰ²×°ºÃÁË¡£²»¹ýÓиöС²åÇú£ºCordova iOS 4.4.0 template Èç¹û±¨´í£¬¾Í¶à°²×°¼¸´Î£¬Ô­Òò»¹ÊÇ·­Ç½µÄÔ­Òò£¬Ã»ÓÐ catch µ½¡£

»¹ÓпÉÄÜ»áÓöµ½ÏÂÃæÕâ¸ö´íÎó£º

"Error: Cannot find module 'config-chain'" when running 'ionic start'

Õâ¸ö´íÎó¾ÍÓà sudo ÃüÁîÖØÐ³¢ÊÔÒ»±éÔ­ÃüÁî¾ÍºÃÁË¡£

×îÖÕ´ò°üÍê³É»áÔÚ dist µÄÎļþ¼ÐÖС£

½ÓÏÂÀ´Õ¹Ê¾Ò»ÏÂÕâ¸ö¿çÈý¶ËµÄÓ¦ÓÃÔÚ¸÷¸öƽ̨ϵıíÏÖ£º

ÏÈչʾһÏ Web ¶Ë

ÔÙչʾһÏÂÔÚÊÖ»úä¯ÀÀÆ÷ÉϵÄЧ¹û£º

Androidƽ̨

Nexus 5x µÄ Web

Nexus 6P µÄ Web

iOS ƽ̨

iPhone 5 µÄ Web

iPhone 7 µÄ Web

iPhone 7 Plus µÄ Web

iPad µÄ Web

½Ó×ÅÔÙ¿´¿´ Mac ¶ËÉϵıíÏÖ£º

×îºó¿´¿´ Cordova µÄЧ¹û£º

¹¦ÄÜչʾ

Óà Vue.js ´î½¨Ò»¸ö Web Ò³ÃæºÜ¿ì¡£

¿´¿´ Vuex ¹ÜÀí״̬µÄ·½±ã¡£µÇ¼״̬±£´æÔÚ state ÀïÃæ£¬È«¾Ö¶¼»á»ñÈ¡µ½¡£

Ò»µ©Óû§Ã»ÓеǼ£¬µã»÷¹ºÂòµç×ÓÊéµÄʱºò£¬ÅжÏûÓÐÓû§µÇ¼¶¼»áÌø×ªµ½µÇÂ¼Ò³Ãæ¡£

»¹ÓÐÒ»µãÖµµÃ˵µÄÊÇ£¬ÓÉÓÚÕâÊÇÒ»¸ö SPA £¬ËùÒÔÀïÃæµÄ·Óɶ¼Óà Router-link ʵÏֵ쬶øÃ»ÓÐÑ¡Óà <a> ±êÇ©µÄÌø×ª£¬Ð§¹û¾ÍÊÇÌø×ª²¢²»ÓÃÈ¥ÇëÇóÊý¾Ý£¬ÃëÌø¡£Õâ¸öÓû§ÌåÑéÕæµÄºÜˬ¡£

<router-link> ±ÈÆðдËÀµÄ <a href="..."> »áºÃһЩ£¬ÀíÓÉÈçÏ£º

ÎÞÂÛÊÇ HTML5 history ģʽ»¹ÊÇ hash ģʽ£¬ËüµÄ±íÏÖÐÐΪһÖ£¬ËùÒÔ£¬µ±ÄãÒªÇл»Â·ÓÉģʽ£¬»òÕßÔÚ IE9 ½µ¼¶Ê¹Óà hash ģʽ£¬ÎÞÐë×÷Èκα䶯¡£

ÔÚ HTML5 history ģʽÏ£¬router-link »áÀ¹½Øµã»÷ʼþ£¬ÈÃä¯ÀÀÆ÷²»ÔÙÖØÐ¼ÓÔØÒ³Ãæ¡£

µ±ÄãÔÚ HTML5 history ģʽÏÂʹÓà base Ñ¡ÏîÖ®ºó£¬ËùÓÐµÄ to ÊôÐÔ¶¼²»ÐèҪд£¨»ù·¾¶£©ÁË¡£

µÇ³öÒ³ÃæÍ¬Àí£¬Ò»µ©Óû§µÇ³ö£¬ËùÓÐÏÔʾÓû§ÃûµÄµØ·½¶¼»á±ä³ÉµÇ¼£¬navigationBar ÉϵĹºÎï³µÒ²Ò»²¢Ïûʧ¡£Óà Vuex ¹ÜÀí״̬£¬Í¦ºÃµÄ¡£

Õâ¾ÍÊÇ email µÄ±íµ¥ÑéÖ¤ÁË£¬Ã»ÓÐÌ«¶àµÄ¼¼Êõº¬Á¿¡£

ÕâÀïÊǹºÎï³µÒ³Ãæ£¬ÕâÀïÓõ½ÁË MVVM Ò³ÃæµÄ°ó¶¨µÄ˼Ïë£¬Ò³ÃæÉÏ4¸ö°´Å¥£¬µãÈÎÒâÒ»¸ö°´Å¥¶¼»áÁ¢¼´¸Ä±äÏÂÃæµÄ×ܼۡ£¹ØÓÚ Vue.js µÄ MVVM ʵÏÖ˼ÏëÖµµÃ iOSer ÃÇѧϰ¡£

½ÓÏÂÀ´Õâ¸öÊÇ iPhone µÄ Safari ÉϵıíÏÖ£¬ËÙ¶È»¹¿ÉÒÔ¡£

ÔÚ¿çÆ½Ì¨µÄÕ⼸¸öÓ¦ÓÃÖУ¬ÌåÑé×îºÃµÄ£¬ÎÒ¾õµÃ»¹ÊÇ Mac µÄÓ¦Óá£Ê¹ÓÃÆðÀ´ÂúÒâ¶È·Ç³£¸ß¡£

×îºó¾ÍÊÇ Cordova ¿ò¼Ü´î½¨µÄ ÊÖ»ú app£¬ÌåÑé¶È²»¸ß£¬¾ßÌåÈçºÎ£¬¿´Í¼°É£¬×ÜÖ®²»ÓÅ»¯µÄ Cordova £¬¶ÔÓÚÌôÌÞµÄÎÒÀ´Ëµ£¬ÎÒÊDz»ÂúÒâµÄ¡£

iPhone ÉϵÄÓ¦ÓÃ

iPad ÉϵÄÓ¦ÓÃ

ÏîÄ¿Íê³ÉÖ®ºóµÄ¸ÐÏë

ÏȰ²ÀûһϠelement-ui Õâ¸öÏîÄ¿£¬ÓÃËüÀ´´î½¨ÏîÄ¿£¬ÕæµÄºÜ¿ì£¬Ò³ÃæºÜ¿ì¾Í¿ÉÒԴÍê³É£¬¿ª·¢ Vue.js µÄͬѧһ¶¨ÓÐÌý¹ýÕâ¸ö¿â¡£½ÚÔ¼³öÀ´µÄ´ó°Ñʱ¼ä¿ÉÒ԰Ѹü¶àµÄ¾«Á¦·ÅÔÚÒµÎñ¿ª·¢ÉÏÃæ¡£

´ó¼Ò¶¼ÔÚ˵ÏÖÔÚÊÇ´óǰ¶Ëʱ´ú£¬Òƶ¯¿ª·¢ºÍǰ¶ËÈÚºÏÊDZØÈ»¡£µ«ÊÇÁ½¸öƽ̨µÄ¿ª·¢Æäʵ»¹ÊÇÓкܶàµÄ²»Í¬£¬ÎÒÔÚ¾­Àú¹ýǰ¶ËµÄ¿ª·¢ºÍ iOS ¿ª·¢ÒԺ󣬸ÐÏ뻹ÊǺܶàµÄ£¬Ç°¶ËºÍ iOS ÊÇÓкܶà¿ÉÒÔÏ໥ѧϰµÄµØ·½£¬Á½ÕßÒ²¸÷ÓÐÓÅȱµã¡£

 

 
   
2397 ´Îä¯ÀÀ       28
Ïà¹ØÎÄÕÂ

Éî¶È½âÎö£ºÇåÀíÀôúÂë
ÈçºÎ±àд³öÓµ±§±ä»¯µÄ´úÂë
ÖØ¹¹-ʹ´úÂë¸ü¼ò½àÓÅÃÀ
ÍŶÓÏîÄ¿¿ª·¢"±àÂë¹æ·¶"ϵÁÐÎÄÕÂ
Ïà¹ØÎĵµ

ÖØ¹¹-¸ÄÉÆ¼ÈÓдúÂëµÄÉè¼Æ
Èí¼þÖØ¹¹v2
´úÂëÕû½àÖ®µÀ
¸ßÖÊÁ¿±à³Ì¹æ·¶
Ïà¹Ø¿Î³Ì

»ùÓÚHTML5¿Í»§¶Ë¡¢Web¶ËµÄÓ¦Óÿª·¢
HTML 5+CSS ¿ª·¢
ǶÈëʽC¸ßÖÊÁ¿±à³Ì
C++¸ß¼¶±à³Ì