Demonstrācijas projekts, kas rakstīts mašīnrakstā un Vue Composition API for Vue.js

Blogs

Demonstrācijas projekts, kas rakstīts mašīnrakstā un Vue Composition API for Vue.js

Demonstrācijas projekts, kas rakstīts mašīnrakstā un Vue Composition API for Vue.js

Kā uzrakstīt Vue3.0 stila kodu?

Motivācija:

Es esmu SICNU students, pēc tam, kad apmeklēju VueConf 2019 Šanhajā, es koncentrējos uz to, kā izmēģiniet mašīnrakstā Vue3.0 .



Bet, kad CompositionAPI-RFC tika publicēts un mūsu kopiena to akceptēja, es domāju, ka VueCLI 4.0 būtu daži veidi, kā man izveidot vue projektu ar Typescript un Composition API, bet atbilde vēl nav…, Cik žēl! ☹️

Tāpēc es nolēmu izveidot savu!



(BTW, es atradu satriecošu sākuma projektu ar kompozīcijas API un TSX, noklikšķiniet šeit! )

Dokumentācija:

Instalējiet kompozīcijas API savā projektā

# via package manager npm install --save @vue/composition-api yarn add @vue/composition-api

Ielādējiet to main.ts:

Jums jāinstalē | _+_ | izmantojot | _+_ | pirms citu API izmantošanas:



@vue/composition-api

Pēc spraudņa instalēšanas komponenta veidošanai varat izmantot kompozīcijas API.

Izveidot komponentu:

Ja rakstāt vienu failu | _+_ | pirms koda rakstīšanas tam vajadzētu būt šādam:

Vue.use()

Saistoši neapstrādāti dati:

objekts | _+_ | nedaudz atšķiras no | _+_ | stils, bet jums par to nav jāuztraucas, to ir viegli iemācīties!

import Vue from 'vue'; import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);

Lai iegūtu sīkāku informāciju, varat palaist šo projektu un pārbaudīt | _+_ | piemērs.

⁉️ Brīdinājumi:

Šeit ir kaut kas, kas jāņem vērā no manas pieredzes, veidojot šo projektu:

VueRouter problēma:

Tagad es pagaidām lietoju | _+_ | | _+_ |,

Es jau minēju piemēru, lai jūs varētu pārbaudīt un reproducēt šo problēmu.

.vue

un | _+_ |, pēc šī projekta izpildes ir | _+_ |, žurnāli var būt šādi:

import { createComponent } from '@vue/composition-api' export default createComponent({ // introduce it later... });

Es domāju, ka tā varētu būt problēma, ko izraisa | _+_ | un | _+_ | tipa definīcija, bet es to neizdomāju.

Ja jums ir kāda ideja, lūdzu, atsūtiet man problēmu.

Un manas vienības testa faila dēļ | _+_ | izmanto arī | _+_ |, lai izvairītos no TypeCheck kļūdu ziņojuma, es to novērsu ar savu Risinājums zemāk .

Risinājums:

Ja jums patiešām ir jāimportē maršrutētāja skata sastāvdaļa, tad jums OBLIGĀTI sniedziet | _+_ |, pat ja tas ir tikai | _+_ |, tad TypeCheck nepaziņos par kļūdu;

Izmēģiniet:

createComponent()

Lejupielādes informācija:

Autors: ShenQingchuan

Avota kods: https://github.com/ShenQingchuan/how-to-write-vue3-style-code

#vuejs #vue #javascript