<p>단일 .mjs 파일에 번들로 포함된 Vue 구성 요소를 만들고 싶습니다. 다른 Vue 프로젝트는 HTTP를 통해 이 .mjs 파일을 가져와 구성 요소를 사용할 수 있습니다. 다른 애플리케이션이 런타임 시 구성을 기반으로 이를 가져오려고 하기 때문에 npm을 통해 플러그형 구성 요소를 설치하는 것은 불가능합니다.</p>
<p>플러그형 구성요소에 대해 고려해야 할 사항</p>
<li>다른 UI 프레임워크/라이브러리의 하위 구성요소를 사용 중일 수 있습니다</li>
<li>맞춤 CSS를 사용할 수 있습니다</li>
<li>이미지 등 다른 파일에 따라 달라질 수 있습니다</li>
</ul>
<시간 />
<p><strong>라이브러리 복사</strong></p>
<p><code>npm create vuetify</code></p>를 통해 새 Vuetify 프로젝트를 만들었습니다.
<p>vite-env.d.ts를 제외한 src 폴더의 모든 내용을 삭제하고 Renderer.vue 컴포넌트를 생성했습니다.</p>
<pre class="brush:php;toolbar:false;"><스크립트 설정 lang="ts">
"vuetify/comComponents"에서 { VContainer }를 가져옵니다.
정의프로프<{ 값: 알 수 없음 }>()
</스크립트>
<템플릿>
<v-컨테이너>
<span class="red-text">값은 다음과 같습니다: {{ JSON.stringify(value, null, 2) }}</span>
</v-컨테이너>
</템플릿>
<스타일>
.red-text { 색상: 빨간색 }
<p>및 index.ts 파일</p>
<pre class="brush:php;toolbar:false;">"./Renderer.vue"에서 렌더러 가져오기;;
내보내기 { 렌더러 };</pre>
<p>vite.config.ts에 라이브러리 모드를 추가했습니다</p>
<pre class="brush:php;toolbar:false;">빌드: {
라이브러리: {
항목: 해결(__dirname, "./src/index.ts"),
이름: "렌더러",
파일명: "렌더러",
},
롤업옵션: {
외부: ["vue"],
출력: {
전역: {
vue: "뷰",
},
},
},
},</pre>
<p>package.json 파일을 확장했습니다</p>
<pre class="brush:php;toolbar:false;">"파일": ["dist"],
"메인": "./dist/renderer.umd.cjs",
"모듈": "./dist/renderer.js",
"수출": {
".": {
"가져오기": "./dist/renderer.js",
"require": "./dist/renderer.umd.cjs"
}
},</pre>
<p>맞춤 CSS를 사용하기 때문에 Vite는 styles.css 파일을 생성하지만 스타일을 .mjs 파일에 삽입해야 합니다. 이 질문을 바탕으로 vite-plugin-css-injected-by-js 플러그인을 사용하고 있습니다.</p>
<p>빌드할 때 맞춤 CSS가 포함된 필수 .mjs 파일을 얻습니다</p>
<시간 />
<p><strong>구성요소 사용</strong></p>
<p><code>npm create vue</code></p>를 통해 새 Vue 프로젝트를 만들었습니다.
<p>테스트 목적으로 생성된 .mjs 파일을 새 프로젝트의 src 디렉터리에 직접 복사하고 App.vue 파일을 </p>
<pre class="brush:php;toolbar:false;"><스크립트 설정 lang="ts">
import { onMounted, type Ref, ref } from "vue";;
const ComponentToConsume: Ref = ref(null);
onMounted(async () => {
노력하다 {
const { Renderer } = wait import("./renderer.mjs") // 런타임 중에 구성 요소를 가져옵니다.
ComponentToConsume.value = 렌더러;
} 잡기 (e) {
console.log(e);
} 마지막으로 {
console.log("완료...");
}
});
</스크립트>
<템플릿>
<div>아래에서 가져온 구성요소:</div>
<div v-if="ComponentToConsume === null">"아직 로드 중..."</div>
<소비할 구성요소 v-else :value="123" />
</템플릿></pre>
<p>안타깝게도 다음과 같은 경고와 오류가 발생합니다</p>
<인용문>
<p>[Vue 경고]: Vue가 반응형 객체가 된 구성 요소를 받았습니다. 이는 불필요한 성능 오버헤드를 유발할 수 있으므로 구성 요소를 <code>markRaw</code>로 표시하거나 <code>ref</code> 대신 <code>shallowRef</code>를 사용하여 방지해야 합니다. </p>
</인용문>
<인용문>
<p>[Vue 경고]: 'Symbol(vuetify:defaults)' 삽입을 찾을 수 없습니다. </p>
</인용문>
<인용문>
<p>[Vue 경고]: 설정 기능 실행 중 처리되지 않은 오류가 발생했습니다</p>
</인용문>
<인용문>
<p>[Vue 경고]: 스케줄러 새로 고침 실행 중 처리되지 않은 오류가 발생했습니다. </p>
</인용문>
<인용문>
<p>잡히지 않은(약속된) 오류: [Vuetify] 기본 인스턴스를 찾을 수 없습니다</p>
</인용문>
<p>제가 무엇을 놓치고 있는지, 아니면 어떻게 고칠 수 있는지 아시는 분 계신가요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vuetify는 격리된 구성 요소를 제공하지 않습니다. 플러그인을 초기화해야 하며 기본 앱에서 이 작업을 수행해야 합니다.
으아악라이브러리와 기본 애플리케이션이 동일한 복사본을 사용하도록 프로젝트 deps에서
vuetify가 중복되지 않도록 하세요.lib는
으아악vuetify作为开发依赖，并在Rollupexternal를 개발 종속성으로 사용하고 Rollupexternal에서 이를 지정하여 프로젝트 전역 항목이 lib와 번들로 묶이는 것을 방지해야 합니다.