Vue.js жобасын қалай құруға болады

Vue.js-тің интеллектуалды және ақымақ компоненттері бар тамаша қалта құрылымы және компоненттік архитектурасы

Vue.js - бұл хайуанстан гөрі керемет фронт. Веб-қосымшаны бастау және бастау оңай. Vue.js көбінесе кішігірім қосымшалардың негізі ретінде сипатталады, ал кейде тіпті jQuery-ге балама ретінде де айтылады, себебі бұл өте кішкентай! Менің ойымша, бұл үлкен жобаларға да сәйкес келеді. Бұл жағдайда оны компоненттік архитектура тұрғысынан жақсы құрылымдау маңызды.

Бірінші үлкен Vue.js жобамды бастамас бұрын мен папканың тамаша құрылымын, компоненттер архитектурасын және атау конвенциясын табу үшін біраз зерттеулер жасадым. Мен Vue.js құжаттамасын, кейбір мақалаларын және көптеген GitHub ашық бастапқы жобаларын қарап шықтым.

Кейбір сұрақтарыма жауап іздеуге тура келді. Мұны мына жазбадан таба аласыз:

  • Vue.js жобасындағы файлдар мен қалталарды қалай құрастырасыз?
  • Ақылды және мылқау компоненттерді қалай жазуға болады және оларды қайда орналастырасыз? Бұл React тұжырымдамасы.
  • Vue.j-тің кодтау стилі және ең жақсы тәжірибесі қандай?

Жақсы түсіну үшін мен шабыттандырылған қайнар көзіммен және басқа сілтемелермен құжаттама жүргіземін.

Vue.js қалтасының құрылымы

Мұнда src қалтасының мазмұны келтірілген. Жобаны Vue CLI-ден бастауға кеңес беремін. Жеке өзім стандартты веб-пакет үлгісін қолдандым.

. ├── app.css ├── App.vue ├── активтер │ │ ... ├── компоненттер │ │ ... ├── main.js ├── миксиндер │ │ ... ├── маршрутизатор │ └── index.js ├── сақтау │ ├── index.js ├── ├── модульдер │ │ └── ... │ │ mutation-types.js ├── аудармалар └── └── index.js ├─ ─ Ыдыс-аяқтар ... └── Көрулер └── ...

Осы қалталардың әрқайсысы туралы кейбір мәліметтер:

  • Активтер - бұл жерде сіз өзіңіздің компоненттеріңізге импортталатын барлық активтерді саласыз
  • Компоненттер - негізгі көріністер болып табылмайтын жобалардың барлық компоненттері
  • миксиндер - араластырғыштар - бұл әртүрлі компоненттерде қайта пайдаланылатын Javascript кодының бөліктері. Миксинде сіз Vue.js. сайтынан әр компоненттің әдістерін енгізе аласыз. Олар оларды қолданатын компонентпен біріктіріледі.
  • маршрутизатор - сіздің жобаларыңыздың барлық маршруттары (менің жағдайда оларды index.js-де бар). Негізінен Vue.js-дің барлығы компонент болып табылады. Бірақ бәрі бірдей емес. Бетте «/ бақылау тақтасы», «/ settings» немесе «/ search» сияқты маршрут бар. Егер компонентте маршрут болса, ол бағытталады.
  • дүкен (қосымша) - мутациялық типтегі Vuex тұрақтылары, ішкі қалта модульдеріндегі Vuex модульдері (содан кейін index.js ішіне жүктеледі).
  • Аудармалар (міндетті емес) - Файлдарды локализациялау, мен Vue-i18n қолданамын және ол өте жақсы жұмыс істейді.
  • утилиттер (міндетті емес) - кейбір компоненттерде қолданатын функциялар, мысалы. B. Regex мәнінің сынақтары, тұрақтылары немесе сүзгілері.
  • Көрулер - Жобаны оқуды жеңілдету үшін, мен бағдарланған компоненттерді бөліп, оларды осы қалтаға саламын. Мен үшін бағытталатын компоненттер тек компоненттер ғана емес, олар парақтарды бейнелейді және бағыттары бар. Содан кейін мен оларды «Көрулерге» орналастырдым, парақты қарап шыққан кезде, сол қалтаға ауысыңыз.

Қажет болса, басқа қалталарды қосуға болады, мысалы. B. Сүзгілер немесе тұрақты, API.

Мені шабыттандырған кейбір ресурстар

  • https://vuex.vuejs.org/kz/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Vue.js-пен ақылды және мылқау компоненттерге қарсы

Ақылды және мылқау компоненттер - бұл менің реакциядан үйренген тұжырымдамам. Интеллектуалды компоненттерді контейнерлер деп те атайды. Олар мемлекеттің өзгеруімен айналысады. Сіз заттардың қалай жұмыс істейтініне жауап бересіз. Керісінше, презентация компоненттері деп аталатын ақымақ компоненттер тек сыртқы түрін алады.

MVC үлгілерімен танысқаннан кейін сақтандырғыш компоненттерін көрініске, ал ақылды компоненттерді контроллермен салыстыруға болады!

React-те ақылды және мылқау компоненттер әр түрлі қалталарға салынады, ал Vue.js-де сіз олардың барлығын бір қалтаға саласыз: компоненттер. Vue.js.-ті ажырату үшін атау конвенциясын қолданыңыз. Сізде ақымақ карта компоненті бар делік. Содан кейін сіз келесі аттардың бірін қолданғаныңыз жөн:

  • BaseCard
  • AppCard
  • VCard

Егер сізде BaseCard пайдаланатын және оған бірнеше әдістер қосатын ақылды компонент болса, оны жобаңызға байланысты атауға болады, мысалы:

  • ProfileCard
  • ItemCard
  • NewsCard

Егер сіздің ақылды компонентіңіз тек әдістермен «ақылды» BaseCard болмаса, жай ғана Base (немесе App немесе V) -дан басталмай, компонентіңізге сәйкес келетін кез-келген атауды қолданыңыз. Мысал:

  • Бақылау тақтасы
  • Іздеу нәтижелері
  • Пайдаланушының профилі

Бұл атау конвенциясы Vue.j-тен ресми стильдер нұсқаулығынан алынған, ол сонымен қатар атау конвенцияларын қамтиды!

Атау ережелері

Vue.j стилі бойынша ресми нұсқаулықтан бірнеше жобалар келтірілген, олар сізге жобаңызды жақсы құрастыруы керек:

  • Компонент атаулары әрдайым бірнеше сөзден тұруы керек, түбірлік қосымша компоненттерін қоспағанда. Мысалы, «Card» орнына «UserCard» немесе «ProfileCard» қолданыңыз.
  • Әр компонент өзінің файлында болуы керек.
  • Бір файлды компоненттердің файл атаулары әрқашан PascalCase немесе әрқашан Kebab-кейсі болуы керек. «UserCard.vue» немесе «user-card.vue» пайдаланыңыз.
  • Бір жақта бір рет қолданылатын компоненттер тек біреу болуы мүмкін екенін көрсету үшін «The» префиксінен басталуы керек. Мысалы, навигациялық жолақ немесе төменгі деректеме үшін TheNavbar.vue немесе TheFooter.vue пайдаланыңыз.
  • Бала компоненттері ата-аналарының префиксі болуы керек. Мысалы, «UserCard» ішіндегі «Фото» компонентін қолданғыңыз келсе, оны «UserCardPhoto» деп атаңыз. Бұл жақсы оқуға арналған, өйткені қалтадағы файлдар алфавит бойынша сұрыпталады.
  • Әрқашан компоненттеріңіздің атауындағы аббревиатураның орнына толық атауды қолданыңыз. Мысалы, «UDSettings» емес, «UserDashboardSettings» қолданыңыз.

Vue.js стилі бойынша ресми нұсқаулық

Сіз Vue.js немесе жаңадан бастаушы болсаңыз да, Vue.js стилі туралы нұсқаулықты оқып шығуыңыз керек. Онда көптеген кеңестер, сондай-ақ ат қою туралы ережелер бар. Онда жасалуы керек және жасалмайтын көптеген мысалдар келтірілген.

Егер сізге бұл жазба ұнаған болса, қолдауды көрсету үшін төмендегі өсек батырмасын бірнеше рет басыңыз! Сондай-ақ, түсініктеме беріңіз және кез-келген кері байланыс беріңіз. Менің артымнан еруді ұмытпа!

Осы сияқты басқа заттарды көргіңіз келе ме? Патреонда мені қолдаңыз