지금 Vue3 작성 시작

Vue3에서 바로 코딩을 시작하기 위해 jsfiddle과 같은 온라인 도구를 사용하여 설정을 만드는 방법에 대한 것입니다.

Vue v3가 마침내 공개 릴리스를 갖게 되었으며 많은 사람들이 사용해 보고 싶어할 것입니다. 이 프레임워크에서 발견한 문제는 진행하기 위해 거쳐야 할 약간의 설정이 있다는 것이므로 최소한의 설정으로 사용을 시작할 수 있는 방법이 있는 것이 좋습니다.

이 경우 소규모 테스트나 예제를 위해 로컬 환경 설정을 건너뛰기 위해 jsfiddle을 사용했습니다. jsbin과 codepen이 있는 대부분의 REPL 스타일 코딩 환경에서 이것을 사용할 수 있습니다. 물론 본격적인 프로젝트를 설정하고 싶다면 official docs 을 따르십시오.

다음은 빠른 설정입니다.

js 리소스 추가(스크립트 태그 또는 설정을 통해)
https://unpkg.com/vue@next/dist/vue.global.js

이것은 항상 최신 버전(작성 당시 3.0.0)을 가져와야 하지만, 단점은 주요 변경 사항이 도입될 수 있으므로 후손을 위해 작업 버전에서 잠그는 것이 가치가 있다는 것입니다.

vue.global.js(또는 제품 버전 vue.global.prod.js)를 사용하면 Vue 객체를 전역 변수로 사용할 수 있으며 IMHO가 이를 수행하는 가장 쉬운 방법입니다.

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app"></div>

const app = Vue.createApp({
  template: `
    <h1>App</h1>
    <my-component></my-component>
  `
})

app.component('my-component', {
  template: `A component`
})

app.mount('#app')

이것은 매우 간단하며 단일 파일 구성 요소를 포함할 수 없는 일반적인 설정 방법입니다. 그리고 #app의 템플릿 콘텐츠를 HTML DOM 요소에 넣을 수 있지만, HTML이 로드되기 전에 렌더링되고 구성 요소에 사용할 수 없으므로 template 태그와 document.getElementById를 사용합니다. ) 내용을 얻으려면

그리고 짜잔:

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app"></div>

<template id="appTemplate">
  <h1>H1: App</h1>
  <my-component></my-component>
</template>

<template id="componentTemplate">
  A component
</template>

const app = Vue.createApp({
  template: document.getElementById("appTemplate").innerHTML
})

app.component('my-component', {
  template: document.getElementById("componentTemplate").innerHTML
})

app.mount('#app')

Vue 3에는 단일 최상위 구성 요소가 필요하지 않으므로 앱 템플릿에서 div 및 구성 요소 태그를 래핑하기 위해 추가h1를 건너뛸 수 있습니다.

링크https://codepen.io/scorch/pen/yLOZyxg

뷰 3 문서: v3.vuejs.org

이미지 크레디트: Paweł Czerwiński