새로운 NUXT 기능은 v2.10 과거 기능입니다

NUXT는 많은 성능 및 애플리케이션 모범 사례가 구워진 놀라운 개발자 경험을 제공합니다. 최근 릴리스에서 개발자 프로세스 속도를 높이고 단순화하는 새로운 기능과 함께이 개발자 경험을 다음 단계로 끌어 올리기 위해 노력해 왔습니다. 오늘 몇 가지를 탐험합시다.

이 기능 중 일부를 탐색 할 수있는 저장소와 사이트를 설정했습니다! 여기에서 확인할 수 있습니다.

데모 라이브 사이트

NUXT 컨텐츠

더 이상 NUXT를 외부 헤드리스 CMS와 짝을 이루지 않고 모든 설정을 수행 할 필요가 없습니다. 특히 큰 규모로 무언가를 찾고 있지 않지만 블로그와 같은 작은 것입니다. NUXT 컨텐츠는 선호도에 따라 Markdown, CSV, Yaml 또는 XML에서 구성을 작성할 수있는 GIT 기반 헤드리스 CMS를 제공합니다. 상자 구성 설정 중 일부가 제공되며 사용자 정의 구성을 작성하는 것은 속성을 만드는 것만 큼 간단합니다.

이것이 개발의 의미 : 디렉토리에 정적 마크 다운 파일을 작성할 수 있으며 이것이 블로그가 될 수 있습니다! 우리는이 컨텐츠를 생성하기 위해 일반적으로 NUXT에서 사용하는 것과 동일한 동적 페이지 API를 사용하고 있습니다.

또한 상자에서 전체 텍스트 검색을 제공합니다. 이는 타사 서비스를 통합하지 않고도 블로그에 빠르게 추가 할 수있는 멋진 기능입니다.

Debbie O'Brien 의이 튜토리얼은 놀라운 가이드이며, 모든 것을 설정하는 모든 것을 안내합니다.

nuxt 구성 요소

내가 계속해서 반복해서하고 있다는 것을 알았던 한 가지는 모든 구성 요소에서 가져 오기 코드를 입력하는 것이 었습니다. 나는 이것을 조금 더 빨리 만들기 위해 몇 가지 스 니펫이 있지만, 모든 파일에 각각 추가하면 여전히 내 작업의 흐름을 약간 방해하고있었습니다.

nuxt 구성 요소 모듈은 더 이상이를 수행 할 필요가 없도록 구성 요소를 스캔, 가져 오기 및 등록합니다. 구성 요소는 구성 요소 디렉토리에 있어야하지만 레이아웃, 페이지 및 구성 요소 자체에서 사용할 수 있습니다.

이 모듈의 추가는 nuxt.config.js에 대한 작은 변화입니다.

 내보내기 기본값 {
  구성 요소 : 참
}

진심으로, 그게 다야!

깊은 다이빙을 원한다면 Kruite Patel의 엄청나게 포괄적 인 가이드가 당신을 덮었습니다.

구성 요소를 반복적으로 사용하면 NUXT는 구성 요소에 대한 공유 청크를 자동으로 생성하는 것과 같은 멋진 최적화를 수행합니다. 그러나 거대한 프로젝트 에서이를 사용할 때는 건축 시간에 영향을 줄 수 있으므로 염두에 두십시오.

nuxt 이미지

NUXT 이미지는 최적화 된 반응 형 이미지를 위해 원활하고 빠른 크기를 제공하고 변환하는 최신 모듈입니다. 내장 최적화기를 사용하거나 Cloudinary 또는 Fastly와 같은 10 명의 즉시 사용 가능한 인기 제공 업체와 협력 할 수 있습니다.

API를 사용한 코드 출력은 표준 및 태그이므로 워크 플로에 통합 할 때 난독 화가 없습니다.

모듈을 추가 한 후 Nuxt.config.js의 이미지 속성을 통해 이미지에 구성을 추가하고 중단 점, 제공자 및 기타 구성을 지정할 수 있습니다.

 내보내기 기본값 {
  이미지 : {
    //`@nuxt/image`에 의해 사전 정의 된 화면 크기 : :
    스크린 : {
      XS : 320,
      SM : 640,
      MD : 768,
      LG : 1024,
      XL : 1280,
      XXL : 1536,
      '2xl': 1536
    },
    // 이미지를`/_nuxt/image/file.png`에 생성합니다
     staticfilename : '[publicpath]/images/[name]-[hash] [ext]',
     도메인 : [
        'images.unsplash.com'
    ],,
    별칭 : {
      Unsplash : 'https://images.unsplash.com'
    }
  }
}

이것은 예로 제공되는 일부 옵션의 샘플링입니다. 전체 문서는 여기에 있습니다.

그리고 사용법은 VUE 구성 요소와 유사합니다.

 <nuxt-img src="/nuxt-icon.png"></nuxt-img>

또는

 <nuxt-picture src="/nuxt-icon.png"></nuxt-picture>

추가 정보 및 모든 옵션은 여기에 문서화되어 있습니다. 벤 홍 (Ben Hong)에게 모자 팁을 사용할 수 있다는 것을 알 수 있습니다. 그는 탐험 할 가치가있는 몇 가지 nuxt 자원을 가지고 있습니다!

샘플 repo

이 모든 기능을 사용하는 것을 탐색하기 위해 샘플 리포를 만들었습니다. 레시피 항목, NUXT 구성 요소에 대한 NUXT-CONTENT가있는 작은 레시피 블로그로, 가져 오기를 정의 할 필요가없고 이미지 변환에 대한 nuxt-image.

데모 라이브 사이트

당신은 여기를 방문하여 모든 것을 실제로 볼 수 있습니다.

배경 이미지에 대해 NUXT 이미지에서 $ IMG API를 어떻게 사용했는지 확인할 수 있습니다. 여기서는 아직 완전히 문서화되지 않았습니다.

NUXT는 놀라운 개발자 경험을 제공합니다. Nuxt는 더 많은 업데이트가있는 새로운 버전을 곧 출시 할 예정이며 항상 전문적으로 구현됩니다. NUXT를 사용하는 것이 지속적으로 기쁨이며 팀과 독신 개발자 모두에게 훌륭한 프레임 워크가되는 이유입니다.

위 내용은 새로운 NUXT 기능은 v2.10 과거 기능입니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!