web-dev-qa-db-fra.com

Est-il possible de compiler les modèles Vue.js en fichiers HTML et CSS statiques?

Récemment, je suis tombé amoureux de Vue.js's composants de fichier unique . Il est tellement plus agréable d'avoir le modèle et les styles d'un composant proches les uns des autres et je constate que j'écris beaucoup moins de bogues maintenant qu'il est si facile de composant une partie d'une page et de l'utiliser à plusieurs endroits.

Je me demande si je pourrais étendre cette structure de composant à fichier unique à la génération de pages HTML statiques, sans Vue impliqué.

Par exemple, disons que je souhaite avoir une page ayant une div principale "content" contenant un en-tête, une section et un pied de page. À l'aide de Vue.js, je peux créer des composants "en-tête", "section" et "pied de page", et utiliser JavaScript pour les instancier après le chargement de la page. Étant donné que chaque partie de la page contient son propre composant, il n’ya aucune chance que CSS dans un composant en affecte un autre, et j’ai une arborescence de fichiers beaucoup plus propre à modifier.

Cependant, cela semble un peu inutile, car ces composants ne sont pas réellement interactifs: je n'utilise ni v-model, ni v-bind ni v-on, j'utilise simplement Vue.js parce que cela me permet de séparer des morceaux de pages. Cela signifie également que ma page ne fonctionnera pas du tout si JavaScript est désactivé, car chaque élément (enregistrer le contenu principal div) dépend de la disponibilité de Vue.

Donc, est-il possible de compiler des fichiers .vue, non pas vers une page qui charge ces composants lors de l'exécution à l'aide de Vue.js, mais pour séparer les fichiers HTML et CSS qui s'affichent sans JavaScript?

Idéalement, j'aurais un composant 'greeting.vue':

<template>
    <p class="greeting">Hello!</p>
</template>
<style scoped>
    .greeting { color: red; }
</style>

Utilisé dans une page:

<html>
    <body>
        <greeting></greeting>
    </body>
</html>

Et ceux-ci compileraient en deux fichiers: une page HTML avec le modèle compilé et pré-rendu, et un fichier CSS contenant les styles pour tous les composants. Je pourrais ensuite inclure la feuille de style générée dans la page et tous les composants seraient stylés.

J'ai consulté vue-loader et vueify , mais je ne comprends pas ce qu'ils font car je n'ai pas suffisamment utilisé Webpack ou Browserify.

Est-ce que ce que j'essaie de faire est possible?

webpackvue.js
8
Ben S

Ce que vous recherchez, c'est le rendu côté serveur. Je vous suggère de jeter un coup d'œil à Nuxt.js. 

D'après les documents VueJS:

Configurer correctement tous les aspects discutés d’une application serveur rendue prête à la production Peut être une tâche ardue. Heureusement, il existe un Excellent projet communautaire qui vise à faciliter tout cela: Nuxt.js. Nuxt.js est un framework de niveau supérieur basé sur l'écosystème de Vue Qui fournit une expérience de développement extrêmement rationalisée Pour l'écriture d'applications Vue universelles. Mieux encore, vous pouvez Même l’utiliser comme générateur de site statique (avec des pages créées sous la forme de Composants Vue à fichier unique)! Nous vous recommandons fortement de l'essayer.

C'est super simple de le faire commencé . Si vous utilisez vue-cli:

$ vue init nuxt/starter <project-name>

Il est livré avec tout ce dont vous avez normalement besoin (Vuex, Router, ..). Gardez simplement à l'esprit que cela impose une certaine structure de dossiers, que vous devez suivre.

Ici est la liste des commandes incluses dans le démarreur. 

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

Vous serez probablement principalement lié à generate, car 

Construisez l'application et générez chaque route sous forme de fichier HTML (utilisé Pour l'hébergement statique).

Il est également intéressant de noter que le projet semble être (au moment de la rédaction de cet article) en cours de développement actif et nous pouvons nous attendre à d’autres fonctionnalités intéressantes! 

3
Sicky

Du guide officiel de vuejs:

Si vous utilisez Webpack, vous pouvez facilement ajouter un pré-rendu à l’aide du prerender-spa-plugin . Il a fait l’objet de tests approfondis avec les applications Vue. En fait, le créateur est membre de l’équipe de base de Vue.

2
Rashad Saleh

Je dirais que vous ne pouvez pas faire cela parce que Vue utilise un DOM virtuel, il ne compile pas les modèles à HTML mais à JavaScript render functions, ce qui est nécessaire pour corriger efficacement le DOM lorsque les données sont mises à jour.

Je suis sûr qu'il est possible de faire ce que vous voulez avec un peu de magie node pour analyser et sortir des fichiers, mais ce serait une entreprise assez lourde pour quelque chose qui n'aurait qu'un effet minimal.

1
craig_h