Vue style 2 elementów bez Vue ładowarki

Question

Biorąc pod uwagę, że jest składnikiem pojedynczego pliku (jak shown in the guide),

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

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

W jaki sposób można to samo zrobić bez Vue ładowarki w niemodularnego środowiska ES5/ES6?

Biorąc pod uwagę, że styl jest zawężona,

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

Czy istnieje sposób, aby wdrożyć scoped CSS w niemodularnego środowiska, zbyt? Jeśli go nie ma, czy istnieje sposób wdrożenia go w środowisku modułowym (pakiet Webpack), ale bez modułu ładującego Vue i niestandardowego formatu .vue?

Answer 1

Zamiast instancję template w składniku Vue można wykorzystać a „bliżej do -the-kompilator alternatywny "z funkcją renderowania bez potrzeby Vue Loader lub kompilatora. Możesz dodać dowolne dodatkowe atrybuty z drugim parametrem w funkcji createElement, co da Ci dużą elastyczność w zakresie tylko stylów.

Zobacz Render Funkcje sekcji w przewodniku, aby uzyskać więcej informacji i pełnych opcji dozwolonych w obj danych:

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

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

Uwaga: Zastrzeżenie jest to, że styl będzie stosowany tylko do komponentu, w którym jest zadeklarowany, więc może nie być w stanie wykorzystać wielu komponentów tej samej klasy, takich jak CSS. Nie jestem pewien, czy to także to, co chcesz osiągnąć.

Przykład z docs spełniali tego przypadku użycia:

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

Można to zrobić, ustawiając zakres ręcznie, jako vue-loader automatycznie.

To jest przykład dokumentacji. Dodanie pewnego rodzaju identyfikatora, "_v-f3f3eg9" w tym przypadku, aby zakres klasy tylko dla tego elementu.

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

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

Answer 3

używam Rollup (+ Bublé) + Vue.js cały czas. Jest to bardzo proste i szybkie.

pakietu zbiorczego config jest jak:

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' } 
    ] 
}; 

Zrobiłem boilerplate repo:

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