Nuxt/Components 모듈 사용 시도

2351 단어 nuxtVue.js

Nuxt/components


설명에 따르면'import를 하지 않아도 구성 요소를 자동으로 읽을 수 있습니다'는 모듈입니다.
편해 보이니까 얼른 써보세요.

Nuxt 설치 및 모듈 설치

# Nuxt
yarn create nuxt-app <project-name>

# Nuxt/Components
yarn add --dev @nuxt/components

nuxt.config.js에 추가

export default {
  buildModules: [
    // TODO: Remove when upgrading to nuxt 2.13+
    '@nuxt/components'
  ]
}
※ TypeScript를 사용하는 사람은 이미 @nuxt/typescript-build 모듈이 있다고 생각하니 끄지 않도록 주의하세요
※ Nuxtv2.13은 아직 출시되지 않았습니다(2020/05/18 현재).
앞으로 이 모듈을 표준에 따라 설치할 것이니 업그레이드할 때 주의하십시오.

Hello,world!해보다


index.vue
<template>
  <div class="container"><HelloWorld /></div>
</template>

index.vue에서 상술한 바와 같이 템플릿만 씁니다.일반적으로 스크립트 블록에 import가 없으면 사용할 수 없지만 이번에는 쓰지 않습니다.
사용자 정의 레이블에 따라 HelloWorld.vue 라는 파일을 components 에 넣습니다.
/components/HelloWorld.vue
<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>
HelloWorld.vue도 상당히 간단하게 써 보았다.나는 여전히 틀만 쓴다.

결과



완성!
import는 없지만 사용자 정의 탭과 같은 vue 파일을 자동으로 읽습니다!

끝날 때


가장 빠른 소개라 사용법만 소개되어 있어 편리합니다
빨리 안정판 기준이 됐으면 좋겠어요.

좋은 웹페이지 즐겨찾기