[RUBY] Introduction de Vuetify aux applications Rails existantes

Si tu veux de la vitesse

Maintenant que Vue.js est sûr, Vuetify est censé l'être. Vuetify est un framework contenant de jolis composants. Même si vous ne le faites pas à partir de zéro, il y a des boutons, des diapositives et d'autres sympas. C'est cool.

J'ai tout de suite essayé de l'introduire en regardant le document. C'était dur. Tout était en anglais.

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

Installer à partir de rien

Au début, je l'ai essayé à partir de rien sans penser à l'introduire à des existants. Tout d'abord, il semble que vous ayez besoin d'une CLI pour Vue. Faisons référence à la formule.

https://cli.vuejs.org/

$ yarn global add @vue/cli

Et faites-le avec la commande vue.

$ vue create my-app

De nombreux fichiers seront créés et la commande suivante y sera entrée.

$ yarn serve

Ce yarn serve est le script original défini dans package.json. " serve ":" vue-cli-service serve ",.

Une fois exécuté, Hello World sera créé comme suit. Je l'ai fait.

Une page comme celle-ci a été affichée. C'est un succès.

Mettez dans cet existant

C'est un moyen de l'insérer dans une application existante, mais cela a été utile. Plutôt presque cet article. Je suis parti de "3. Installez Vuetify" ici.

[[Rails 6] Créez un environnement Rails + Vue + Vuetify en 10 minutes](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)

Cependant, j'ai eu une erreur étrange. Je ne suis pas sûr de ce dont je me souviens à ce moment-là, mais je pense que ça n'a pas fonctionné comme ça. Il y avait un lien vers le problème suivant dans le journal des erreurs.

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

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

C'était ce type.

Le traitement de $ attrs est en lecture seule "et" $ listeners est en lecture seule

Lorsque j'ai suivi le lien ci-dessus, une personne formidable a donné une réponse. https://github.com/vuetifyjs/vuetify/discussions/4068#discussioncomment-24984

Cela semble bon de faire cela.

config/webpack/environment.js

//Omission
//Ajoutez ce qui suit

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

Ensuite, c'était fait. Le bouton pourrait être affiché.

Tu l'as fait.

Une difficulté a disparu et une autre est difficile

Eh bien, j'ai pu introduire le bouton en toute sécurité, mais je suis allé à celui où les personnages originaux étaient incroyables. Je dois modifier le design ici et là. Que devrais-je faire?

La prochaine fois, nous attendons avec impatience.