Question

考虑到单个文件组件（shown in the guide），

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

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

在非模块化ES5 / ES6环境中如何在没有Vue加载器的情况下完成同样的事情？

考虑到样式是作用域的，

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

有没有办法在非模块化环境中实现作用域CSS？如果没有，有没有办法在模块化环境（Webpack）中实现它，但没有Vue加载器和自定义.vue格式？

Answer 1

不使用Vue组件中的template实例，而是可以利用渲染功能来“更接近编译器”，而无需使用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'
});

Answer 2

可以实现手动放置范围，因为vue-loader会自动执行。

这是文档的示例。在这种情况下添加某种ID“_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' }
  ]
};

我做了boilerplate repo：

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

没有Vue加载器的Vue 2组件样式

3 个答案: