Vue.js 2.0에서 글로벌 구분 기호를 설정하는 방법

Vue.js 2.0에서 글로벌 구분 기호를 설정하는 방법

Vue.js 1.0에서는 다음 코드로 글로벌 딜리미터를 설정할 수 있습니다.

Vue.config.delimiters = ['${', '}'];

그러나 Vue.js 2.0에서는 삭제되었습니다.매번 구분 기호를 설정하려면 다음 코드를 사용해야 합니까?

new Vue({
  delimiters: ['${', '}']
})

Vue2의 경우 다음과 같이 시도합니다.

Vue.options.delimiters = ['${', '}'];

글로벌하게 딜리미터를 설정할 수 없는 것을 알고 있는 한, 그 이유는 다음과 같습니다.

2.0에서는 컴포넌트 레벨의 딜리미터가 됩니다.즉, 인 DOM 템플릿에 의존하는 루트인스턴스에 대해서만 설정할 필요가 있습니다.vueify 또는 vue-loader에서 처리되는 모든 구성 요소는 기본 구분 기호를 계속 사용할 수 있습니다.

이 변경은 서드파티제의 컴포넌트를 사용하기 쉽게 하기 위한 것입니다.이는 딜리미터를 글로벌하게 변경하면 올바르게 컴파일할 수 없기 때문입니다.

출처 : https://github.com/vuejs/vue-cli/issues/100

간단한 회피책은 어떨까요?클래스, 컨스턴트 또는 다음과 같은 모든 종류의 설정을 준비할 수 있습니다.

VueConfig.js

export const VueConfig = { delimiters: ['${', '}'] };

그리고 앱.js에서는 간단하게 할 수 있습니다.

```

import {VueConfig} from './VueConfig';

new Vue(
    Object.assign(VueConfig, {
        el: '#app',
        data: {
            msg: 'Oh my app',
        }
    })
);

```

효과는 다음과 같습니다.http://take.ms/wiPGR

언급URL : https://stackoverflow.com/questions/41075439/how-to-set-global-delimiters-in-vue-js-2-0