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

Question

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

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

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

在非模块化的 ES5/ES6 环境下，没有 Vue loader 怎么做同样的事情？

考虑到样式是作用域的，

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

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

Answer 1

可以手动放置作用域，就像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 2

我一直使用Rollup (+ Bublé) + Vue.js。它非常简单快捷。

汇总配置如下：

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

Answer 3

除了在 Vue 组件中使用 template 实例之外，您还可以利用 render 函数 来利用“更接近编译器的替代方案”，而无需 Vue 加载器或编译器.您可以使用 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'
});