Vue 2 styles without Vue bootloader

Question

Given that there is one file component ( specified in the manual ),

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

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

How can I do the same without the Vue bootloader in a non-modular ES5 / ES6 environment?

Given that style is limited,

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

Is there a way to implement cloud CSS in a non-modular environment? If not, is there a way to implement it in a modular environment (Webpack), but without a Vue loader and a custom .vue format?

Answer 1

template Vue " " Vue Loader , createElement, .

. , obj:

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

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

. , , , , CSS. , , .

, :

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

Hide result

Answer 2

, vue-loader .

. "_v-f3f3eg9", .

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

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

Answer 3

Rollup (+ Bublé) + Vue.js . .

Rollup :

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

:

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