Intégration d'un fichier .vue dans un projet

:salut:
(en mode un peu de retour en programmation):mrgreen:

Habituellement plus utilisateur de Qt, j’approfondis depuis peu ma connaissance de JS et je découvre Vue.js. Rien d'étonnant, je dois avouer qu'à la lecture de quelques articles et tutos cela me semble plutôt pas mal.
Je suis en pleine lecture de l'excellent tutoriel de Maurice Chavelli et j'en suis actuellement au chapitre des composants.
Cette partie là est évidemment très intéressante et laisse imaginer plein de possibilités.

J'ai aussi lu une première partie du tuto de Mickael. Mais ??? Il serait donc possible d'utiliser un fichier externe comme template ? Mais ça devient de plus en plus sympa ce Vue.js :) :mouarf::mouarf::mouarf:

Ni une, ni deux, je m'empresse d'ajouter quelques lignes à mon code d'apprentissage et ... ben ça fonctionne pas :aie::aie::weird:
Et là je me dis qu'en fait il y a certainement un truc à coté du quel je suis passé. Un truc un peu du genre serveur web de développement, ...

Jusqu'à présent le point sympa que j'ai "vue.js" dans ce framework c'est tout ce qu'il permet de faire sans devoir installer quoique ce soit. En gros, un éditeur de texte et un navigateur web suffisent pour faire des applis sympa (il n'est peut-être pas le seul d'ailleurs ???)
Sans remettre en cause le grand intérêt que j'ai pour lui, si un serveur web de dév est nécessaire ça gâche un peu le goût du plaisir...

Quelqu'un parmi vous pourrait-il éclairer ma lanterne ? ou me conseiller ?


D'avance merci à tous et bon dernier jour 2019.

Tu dois toujours utiliser un serveur web de dev pour le développement d'applications moderne web avec les nouveaux frameworks / libs JavaScript.

La solution standard est d'utiliser un bundler qui sert à générer ton livrable (le site à déployer) et qui embarque généralement un tel serveur, inutile d'installer un Apache donc. La solution standard est Webpack.

Point de vue dev ton site n'est plus architecturé autour du fichier index.html mais autour d'un index.js qui est le point d'entrée du bundler et qui référence tous tes composants. Il va ensuite te générer tous les fichiers qui vont bien dont le index.html qui lui sera le point d'entrée à l'exécution pour la navigateur.

Donc en gros quand tu développes tu ne fais plus d'imports de scripts directement dans ton index.html, ça se passe dans ton index.js et c'est ton bundler qui va générer automatiquement les liens pour le index.html quand tu vas lancer ton serveur de dev ou générer la version déployable de ton application (le livrable).

Le mieux au départ est d'abstraire cette partie en passant par vue-cli pour initialiser ton projet et le manipuler (lancer un serveur de dev, build, etc ...).

Hello,

Merci pour tes précisions.
Le souci que j’avais était essentiellement lié au fait que je peux être mené à coder mon petit projet sur différents PC Windows.
J’aurai aimé m’affranchir de la question : le serveur de dev est-il installé sur le PC ?
Du coup j’ai tenté de contourner le problème en faisant une installation «*portable*» et à priori ça fonctionne.

Je devrais donc pouvoir développer mon projet sur une clé USB que je pourrais trimbaler avec moi.

Bonne soirée.

J

Tu dois utiliser npm pour gérer tes dépendances, ton serveur web sera installé par ce biais et sera stocké dans le répertoire node_modules de ton projet.

Si tu dois utiliser ton projet sur plusieurs PC le mieux reste d'avoir ton projet sur un dépôt Git via un service type GitHub / GitLab et de cloner ton projet sur chaque machine.

Ça fait beaucoup de choses à apprendre :

- Git
- npm
- webpack
- Vue

Mais aujourd'hui c'est absolument indispensable si tu veux faire du dev web moderne.