web-dev-qa-db-fra.com

Peut-on faire une application vue.js sans composant d'extension .vue et webpack?

Remarque: pouvons-nous écrire une grande application vue.js sans utiliser de compilateur pour le code comme actuellement je vois tous les exemples utiliser webpack maintenant pour rendre le code vue.js compatible pour le navigateur.

Je veux faire vue.js application sans webpack et sans utiliser .vue extension. C'est possible? si c'est possible, pouvez-vous fournir un lien ou donner un exemple sur la façon d'utiliser le routage dans ce cas.

Comme nous faisons des composants dans .vue l'extension peut être un composant make dans .js extension et utilisation de l'application comme nous le faisons dans angular 1 où nous pouvons faire une application entière sans trans-compilateur pour convertir le code.

Peut être fait en html, css, js uniquement et sans truc de webpack.

Ce que j'ai fait . index.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vueapp01</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js ce fichier ajouté dans le temps de chargement du webpack

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a href="#/hello">Hello route</a>
    <a href="#/">Helloworld route</a>
    {{route}}
    <router-view/>
     <!-- <hello></hello> -->
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      route : "This is main page"
    }
  }

}
</script>

routeur

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '../components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

J'ai fait quelque chose comme ça. Pouvons-nous le faire en utilisant uniquement des fichiers html, css, js avec pas webpack pour compiler le code. Comme nous le faisons dans angular 1.

Merci

vue.jsvuejs2vue-componentvue-router
16
Himanshu sharma

Comme indiqué dans ce jsFiddle: http://jsfiddle.net/posva/wtpuevc6/ , vous n'avez aucune obligation d'utiliser les fichiers webpack ou .vue.

Le code ci-dessous ne vient pas de moi et tout le mérite revient à ce créateur de jsFiddle:

Créez un fichier index.html: 

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<script src="/js/Home.js"></script>
<script src="/js/Foo.js"></script>
<script src="/js/router.js"></script>
<script src="/js/index.js"></script>

<div id="app">
  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-view></router-view>
</div>

Home.js 

const Home = { template: '<div>Home</div>' }

Foo.js 

const Foo = { template: '<div>Foo</div>' }

router.js 

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

index.js 

new Vue({
    router,
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})

Appréciez le cadre ...

Juste une petite note: .vue les fichiers sont vraiment géniaux, vous devriez absolument les essayer si vous ne les utilisez pas n'est pas obligatoire

12
Hammerbot

J'ai également commencé à apprendre vue.js et je ne suis pas familier avec webpack et d'autres choses et je voulais également séparer et utiliser les fichiers .vue car cela rend la gestion et le code plus propres.

J'ai trouvé cette bibliothèque: https://github.com/FranckFreiburger/http-vue-loader

et un exemple de projet l'utilisant: https://github.com/kafkaca/vue-without-webpack

Je l'utilise et cela semble bien fonctionner.

9
yeahman

Vous pouvez parfaitement, mais avec beaucoup d'inconvénients. Par exemple: vous ne pouvez pas facilement utiliser n'importe quel préprocesseur, comme Sass ou Less; ou TypeScript ou transpiler du code source avec Babel.

Si vous n'avez pas besoin de support pour un navigateur plus ancien, vous pouvez utiliser les modules ES6 dès aujourd'hui. Presque tous les navigateurs le prennent en charge. Voir: ES6-Module . Mais Firefox ne supporte pas dynamyc import () . Seul Firefox 66 (Nightly) le prend en charge et doit être activé. Et si cela ne suffisait pas, votre application web ne sera pas indexée. C'est mauvais pour le référencement. Par exemple, Googlebot peut explorer et indexer du code Javascript mais tilise toujours l'ancien Chrome 41 pour le rendu, et sa version ne prend pas en charge les modules ES6.

Si ce ne sont pas des inconvénients pour vous, vous pouvez le faire:

1 - Supprimez toute importation de bibliothèque de trente parties comme Vue, VueRouter, etc. Et incluez-les dans le fichier index.html à l'aide de balises de script. Toutes les variables globales sont accessibles dans tous les modules es6. Par exemple, supprimez cette ligne du fichier main.js et de tous les fichiers .vue:

import Vue from 'vue';

Et ajoutez cette ligne dans votre index.html:

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

2 - Réécrivez tous les fichiers .vue et changez l'extension de fichier en .js. Par exemple, réécrivez quelque chose comme ceci:

<template>
    <div id="home-page">
        {{msg}}
    </div>
</template>
<script>
    export default {
        data: function() {
            return { msg: 'Put home page content here' };
        }
    }
</script>
<style>
    #home-page {
        color: blue;
    }
</style>

Pour quelque chose comme ça:

let isMounted = false; /* Prevent duplicated styles in head tag */

export default {
    template: `
        <div id="home-page"> /* Put an "id" or "class" attribute to the root element of the component. Its important for styling. You can not use "scoped" atribute because there isnt a style tag. */
            {{msg}}
        </div>
    `,
    mounted: function () {
        if (!isMounted) {
            let styleElem = document.createElement('style');
            styleElem.textContent = `
                #home-page {
                    color: blue;
                }
            `;
            document.head.appendChild(styleElem);
            isMounted = true;
        }
    },
    data: function () {
        return {
            msg: 'Put home page content here'
        };
    }
}

3 - C'est tout. Je mets un exemple dans ce lien

P.S. L'édition de texte sans mise en évidence de la syntaxe peut être frustrante. Si vous utilisez Visual Studio Code, vous pouvez installer l'extension Template Literal Editor . Il permet d'éditer des chaînes littérales avec une coloration syntaxique. Pour les styles, sélectionnez la syntaxe CSS et pour les modèles, la syntaxe HTML. Les balises inconnues en HTML sont mises en évidence différemment. Pour résoudre ce problème, changez le thème de la couleur. Par exemple, installez Brackets Dark Pro thème de couleur ou n'importe quel thème que vous aimez.

Cordialement!

3
Pedro Urday

Bien sûr que vous le pouvez. Nous avons fait un projet avec Vue, et nous avons eu quelques problèmes lors de la compilation de .vue des dossiers. Nous sommes donc passés à la structure avec trois fichiers distincts.

Mais sachez que vous avez besoin de webpack de toute façon. L'idée de Vue était de diviser d'énormes projets en composants, donc en utilisant un modèle à l'intérieur de .js fichier c'est assez normal. Alors jetez un œil à

html-loader Et css-loader

En utilisant ces modules, vous pouvez écrire quelque chose comme ceci:

component.js 

// For importing `css`. Read more in documentation above 
import './component.css'

// For importing `html`. Read more in documentation above
const templateHtml =  require('./component.html')

export default {
  name: 'ComponentName',
  components: { /* your components */ },
  mixins: [/* your mixins */ ],
  template: templateHtml,
  computed: .....
}

component.css 

#header {
  color: red
}

component.html 

<div id="header"></div>

[~ # ~] mais [~ # ~]

Vous devez savoir que le fichier HTML doit être écrit de la même manière que moi, vous l'aurez dans la propriété template.

Jetez également un œil à ce dépôt, peut-être trouverez-vous quelque chose d'utile ici

Vue-html-loader . C'est une fourchette de html-loader par Vue core team.

1
Yevhenii Herasymchuk