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

Posted 2023-02-23

【中文标题】没有 Vue 加载器的 Vue 2 组件样式

【英文标题】：Vue 2 component styles without Vue loader

【发布时间】：2017-08-03 13:34:04

【问题描述】：

考虑到有单个文件组件（如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 格式？

【参考方案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>'
);

【讨论】：

但是带有 的 .vue 文件需要 Vue 加载器。没有 Vue loader 怎么实现？

【参考方案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

【讨论】：

感谢您的示例，它具有说明性。不知道布尔。然而，我感兴趣的是如何在纯 JS 中使用 Vue，而不需要编译和构建。尤其是组件样式。

哦不，浏览器永远不会理解组件样式。您必然需要一个构建步骤。

我很确定它在 Vue 中是可行的，但不确定如何。只是因为 Vue 加载器应该将 .vue 编译为 something。而且仅仅因为竞争对手的框架完全支持 vanilla ES5，不支持它对 Vue 来说就是一派胡言。

【参考方案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'
);

【讨论】：

是的，谢谢，在我看来，渲染函数是目前唯一可用的方法。