[RUBY] Einführung von Vuetify in vorhandene Rails-Apps

Wenn Sie Geschwindigkeit wollen

Jetzt, da Vue.js sicher ist, soll es Vuetify sein. Vuetify ist ein Framework voller netter Komponenten. Auch wenn Sie es nicht von Grund auf neu machen, gibt es Schaltflächen, Folien und andere coole. Es ist cool.

Ich habe sofort versucht, es vorzustellen, während ich mir das Dokument angesehen habe. Es war hart. Es war alles auf Englisch.

https://vuetifyjs.com/en/getting-started/installation/

Aus dem Nichts installieren

Zuerst habe ich es von Grund auf versucht, ohne darüber nachzudenken, es in bestehende einzuführen. Zunächst scheint es, dass Sie eine CLI für Vue benötigen. Verweisen wir auf die Formel.

https://cli.vuejs.org/

$ yarn global add @vue/cli

Und mach es mit dem Befehl vue.

$ vue create my-app

Es werden viele Dateien erstellt und der folgende Befehl wird dort eingegeben.

$ yarn serve

Dieser "Garnaufschlag" ist das ursprüngliche Paket, das in package.json definiert ist. "dienen": "vue-cli-service dienen", ".

Bei der Ausführung wird Hello World wie folgt erstellt. Ich habs gemacht.

Eine Seite wie diese wurde angezeigt. Es ist ein Erfolg.

Setzen Sie das vorhandene ein

Es ist eine Möglichkeit, es in eine vorhandene App einzufügen, aber dies war hilfreich. Eher fast dieser Artikel. Ich habe hier mit "3. Install Vuetify" begonnen.

[[Rails 6] Erstellen Sie in 10 Minuten eine Rails + Vue + Vuetify-Umgebung](https://qiita.com/Ryoga_aoym/items/e1d91351389904240594#3-vuetify%E3%82%92%E3%82%A4%E3 % 83% B3% E3% 82% B9% E3% 83% 88% E3% 83% BC% E3% 83% AB)

Ich habe jedoch einen seltsamen Fehler erhalten. Ich bin mir nicht sicher, woran ich mich damals erinnere, aber ich habe das Gefühl, dass es nicht so geklappt hat, wie es war. Das Fehlerprotokoll enthielt einen Link zu dem folgenden Problem.

https://github.com/vuetifyjs/vuetify/discussions/4068

"$attrs is readonly" and "$listeners is readonly" 

Es war dieser Typ.

Der Umgang mit $ attrs ist schreibgeschützt "und" $ listeners ist schreibgeschützt

Als ich dem obigen Link folgte, gab eine großartige Person eine Antwort. https://github.com/vuetifyjs/vuetify/discussions/4068#discussioncomment-24984

Es scheint gut zu sein, dies zu tun.

config/webpack/environment.js

//Unterlassung
//Fügen Sie Folgendes hinzu

environment.config.merge({
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})

Dann war es geschafft. Die Schaltfläche könnte angezeigt werden.

Du hast es geschafft.

Eine Schwierigkeit ist weg und eine andere ist schwierig

Nun, ich konnte den Knopf sicher einführen, aber ich ging zu dem, bei dem die ursprünglichen Charaktere erstaunlich waren. Ich muss das Design hier und da ändern. Was soll ich machen?

Nächstes Mal freuen wir uns darauf.