6

Considering that there is single file component (as shown in the guide),

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

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

How can the same thing be done without Vue loader in non-modular ES5/ES6 environment?

Considering that the style is scoped,

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

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

4

3 回答 3

6

除了template在 Vue 组件中使用实例之外，您还可以利用带有渲染功能的“更接近编译器的替代方案”，而无需 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'
});

于 2017-04-07T02:26:15.923 回答
0

它可以通过手动放置范围来实现，就像vue-loader自动放置一样。

这是文档的示例。添加某种 ID，在本例中为“_v-f3f3eg9”，以将类的范围仅用于该元素。

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

Vue.component('my-component', {
    template: '<div class="example" _v-f3f3eg9>hi</div>'
});
于 2017-03-13T20:19:30.893 回答
-1

我一直使用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
于 2017-03-16T17:46:42.150 回答