Vue 2 컴포넌트 스타일(Vue 로더 없음)

Vue 2 컴포넌트 스타일(Vue 로더 없음)

파일 컴포넌트가 1개(가이드 참조)인 것을 고려하면,

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

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

비모듈러형 ES5/ES6 환경에서 Vue 로더 없이 동일한 작업을 수행할 수 있는 방법은 무엇입니까?

그 스타일이 스코프가 있는 걸 생각하면

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

비모듈형 환경에서도 스코프 CSS를 구현할 수 있는 방법이 있습니까?없는 경우 Vue 로더와 커스텀 .vue 형식을 사용하지 않고 모듈러 환경(Webpack)에서 구현할 수 있는 방법이 있습니까?

를 사용하는 대신templateVue 컴포넌트에서는 Vue Loader나 컴파일러 없이 렌더링 기능을 사용하여 '컴파일러에 가까운 대체'를 이용할 수 있습니다.createElement 함수의 두 번째 파라미터를 사용하여 임의의 Atribut을 추가할 수 있습니다.이것에 의해, 스타일 뿐만이 아니라, 많은 유연성을 얻을 수 있습니다.

자세한 내용과 데이터 obj에서 허용되는 모든 옵션에 대한 자세한 내용은 가이드의 "Render Functions" 섹션을 참조하십시오.

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

다음과 같이 스코프를 수동으로 배치할 수 있습니다.vue-loader자동으로 실행됩니다.

이 문서의 예를 다음에 나타냅니다.이 경우 특정 ID(_v-f3f3eg9)를 추가하여 해당 요소에 대해서만 클래스의 범위를 지정합니다.

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

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

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

보일러 플레이트 보고서를 작성했습니다.

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

언급URL : https://stackoverflow.com/questions/42765262/vue-2-component-styles-without-vue-loader