Vue 2-Komponenten-Arten ohne Vue loader

Question

man bedenkt, dass es einzelne Dateikomponente (wie shown in the guide),

<style> 
.example { 
    color: red; 
} 
</style> 

<template> 
    <div class="example">hi</div> 
</template> 

Wie kann die gleiche Sache in nicht-modularen ES5/ES6 Umgebung ohne Vue loader getan werden?

Bedenkt man, dass der Stil scoped ist,

<style scoped> 
.example { 
    color: red; 
} 
</style> 

Gibt es eine Möglichkeit scoped CSS in nicht-modularen Umgebung zu implementieren, auch? Wenn es keine gibt, gibt es eine Möglichkeit, es in einer modularen Umgebung (Webpack) zu implementieren, aber ohne Vue Loader und benutzerdefiniertes .vue-Format?

Answer 1

Statt die template Instanz in der Vue Komponente verwenden, können Sie nutzen eine ‚näher zu -die-Compiler-Alternative 'mit der Render-Funktion ohne die Notwendigkeit für den Vue Loader oder Compiler. Sie können zusätzliche Attribute mit dem zweiten Parameter in der createElement Funktion hinzufügen und das gibt Ihnen eine Menge Flexibilität zusätzlich zu den Stilen.

Siehe im Daten obj erlaubt Funktionen Abschnitt im Leitfaden für weitere Informationen und den vollständigen Optionen Render:

https://vuejs.org/v2/guide/render-function

https://vuejs.org/v2/guide/render-function#The-Data-Object-In-Depth

Hinweis: Der Nachteil hierbei ist, dass Der Stil wird nur für die Komponente gelten, in der er deklariert ist, sodass er möglicherweise nicht für mehrere Komponenten der gleichen Klasse wie CSS verwendet werden kann. Nicht sicher, ob das auch was du erreichen willst.

Ein Beispiel aus dem zu diesem Anwendungsfall gesorgt docs:

Vue.component('example', { 
 
    // render function as alternative to 'template' 
 
    render: function (createElement) { 
 
     return createElement(
 
      // {String | Object | Function} 
 
      // An HTML tag name, component options, or function 
 
      // returning one of these. Required. 
 
      'h2', 
 
      // {Object} 
 
      // A data object corresponding to the attributes 
 
      // you would use in a template. Optional. 
 
      { 
 
       style: { 
 
        color: 'red', 
 
        fontSize: '28px', 
 
       }, 
 
       domProps: { 
 
        innerHTML: 'My Example Header' 
 
       } 
 
      }, 
 
      // {String | Array} 
 
      // Children VNodes. Optional. 
 
      [] 
 
    )} 
 
}); 
 

 
var example = new Vue({ 
 
    el: '#yourExampleId' 
 
});

Answer 2

Es kann erreicht werden, das Scope manuell zu setzen, wie vue-loader automatisch tut.

Dies ist das Beispiel der Dokumentation. Hinzufügen einer Art von ID, "_v-f3f3eg9" in diesem Fall, um die Klasse nur für dieses Element zu definieren.

<style> 
.example[_v-f3f3eg9] { 
    color: red; 
} 
</style> 

Vue.component('my-component', { 
    template: '<div class="example" _v-f3f3eg9>hi</div>' 
}); 

Answer 3

Ich benutze Rollup (+ Bublé) + Vue.js die ganze Zeit. Es ist ziemlich einfach und schnell.

Die Rollup Config ist wie:

import vue from 'rollup-plugin-vue'; 
import resolve from 'rollup-plugin-node-resolve'; 
import buble from 'rollup-plugin-buble'; 

const pkg = require('./package.json'); 
const external = Object.keys(pkg.dependencies); 

export default { 
    external, 
    globals: { vue: 'Vue' }, 
    entry: 'src/entry.js', 
    plugins: [ 
    resolve(), 
    vue({ compileTemplate: true, css: true }), 
    buble({ target: { ie: 9 }}) 
    ], 
    targets: [ 
    { dest: 'dist/vue-rollup-example.cjs.js', format: 'cjs' }, 
    { dest: 'dist/vue-rollup-example.umd.js', format: 'umd' } 
    ] 
}; 

Ich habe einen boilerplate repo:

git clone https://github.com/jonataswalker/vue-rollup-example.git 
cd vue-rollup-example 
npm install 
npm run build