Vue.js 개발자라면 지금쯤 Nuxt.js에 대해 들어봤을 것입니다. 그러나 모든 과장된 내용이 무엇인지 모를 수도 있습니다. 아마도 "프레임워크에 프레임워크가 필요한 이유는 무엇입니까?"라고 묻고 있을 것입니다. Vue는 이미 JavaScript 앱 개발을 더 쉽게 만듭니다. Nuxt.js 뒤에 숨겨진 아이디어는 무엇입니까?
Nuxt.js는 무엇입니까?
Nuxt.js는 Vue 를 기반 으로 하는 상위 수준 프레임워크입니다. 범용 또는 단일 페이지 Vue 앱의 개발을 단순화합니다.
Nuxt.js는 서버 및 클라이언트 코드 배포의 세부 정보를 추상화하므로 애플리케이션 개발에 집중할 수 있습니다. Nuxt의 목표는 기본 프로젝트 기반으로 사용할 수 있을 만큼 충분히 유연하게 만드는 것입니다. Nuxt가 하는 대부분의 작업은 개발 단계에서 발생하기 때문에 JavaScript 파일에 몇 킬로바이트만 추가하면 많은 기능을 얻을 수 있습니다.
다음 Vue 프로젝트에 Nuxt를 고려해야 하는 이유를 살펴보겠습니다.
1. 번거로움 없이 유니버설 앱 만들기
Nuxt.js의 가장 큰 장점 중 하나는 범용 앱을 더 쉽게 만들 수 있다는 것입니다.
유니버설 앱이란 무엇입니까?
범용 앱은 클라이언트 측과 서버 측 모두에서 실행할 수 있는 JavaScript 코드를 설명하는 데 사용됩니다.
Vue와 같은 많은 최신 JavaScript 프레임워크는 SPA(단일 페이지 애플리케이션) 구축을 목표로 합니다. 기존 웹사이트에 비해 SPA를 사용하면 많은 이점이 있습니다. 예를 들어 빠르게 업데이트되는 매우 빠른 UI를 구축할 수 있습니다. 그러나 SPA에는 긴 로드 시간과 같은 단점도 있으며, SEO 목적으로 크롤링할 콘텐츠가 페이지에 처음에 없기 때문에 Google은 이를 해결하기 위해 고군분투합니다. 모든 콘텐츠는 사실 후에 JavaScript로 생성됩니다.
범용 앱은 SPA를 갖는 것이지만 빈 index.html페이지를 사용하는 대신 웹 서버에 애플리케이션을 미리 로드하고 로드 시간을 단축하고 로드 시간을 단축하기 위해 모든 경로에 대한 브라우저 요청에 대한 응답으로 렌더링된 HTML을 전송합니다. Google이 페이지를 더 쉽게 크롤링할 수 있도록 하여 SEO
Nuxt.js는 범용 앱을 보다 간단하게 작성할 수 있도록 도와줍니다.
범용 애플리케이션을 구축하는 것은 서버 측과 클라이언트 측 모두에서 많은 구성을 수행해야 하기 때문에 지루할 수 있습니다.
이것이 Nuxt.js가 Vue 애플리케이션에서 해결하고자 하는 문제입니다. Nuxt.js를 사용하면 클라이언트와 서버 간에 코드를 간단하게 공유할 수 있으므로 애플리케이션의 논리에 집중할 수 있습니다.
Nuxt.js를 사용하면 구성 요소 와 같은 속성 에 액세스할 수 있으므로 클라이언트에서 렌더링할지 서버에서 렌더링할지 쉽게 결정할 수 있습니다. 구성 요소 가 서버 측에서 렌더링되는 것을 의도적으로 방지하는 데 사용되는 구성 요소와 같은 특수 구성 요소도 있습니다 .
isServerisClientno-ssr
마지막으로 Nuxt는 데이터를 가져오고 서버 측에서 렌더링하는 데 사용할 수 있는 구성 요소 내부의 asyncData 메서드 에 대한 액세스를 제공합니다 .
2. Vue 앱을 정적으로 렌더링하고 서버 없이 범용 앱의 모든 이점을 얻으십시오.
예를 들어 다음 페이지 가 있는 경우 (Nuxt의 경로 용어):
-| 페이지/
----| about.vue
----| index.vueNuxt는 다음 폴더 구조를 생성합니다.
-| 거리/
----| 약/
------| index.html
----| index.html이렇게 하는 이점은 범용 응용 프로그램의 이점과 매우 유사합니다. 페이지를 더 빠르게 로드하고 검색 엔진과 소셜 미디어 크롤러가 웹사이트를 크롤링하는 데 도움이 되는 마크업이 있습니다.
차이점은 더 이상 서버가 필요하지 않다는 것입니다. 모든 것은 개발 단계에서 생성됩니다.
서버 없이도 범용 렌더링의 이점을 얻을 수 있기 때문에 강력합니다. GitHub Pages 또는 Amazon S3에서 앱을 호스팅할 수 있습니다.
3. 자동 코드 분할 받기(사전 렌더링된 페이지)
Nuxt.js는 특별한 Webpack 구성으로 웹사이트의 정적 버전을 생성할 수 있습니다.
정적으로 생성된 각 경로(페이지)에 대해 경로는 해당 경로를 실행하는 데 필요한 코드와 함께 자체 JavaScript 파일도 가져옵니다.
이것은 전체 응용 프로그램의 크기에 비해 JavaScript 파일의 크기를 작게 유지하기 때문에 속도에 큰 도움이 됩니다.
4. 시작 템플릿을 사용하여 명령줄을 통해 설정
Nuxt.js는 starter-template조직에 적합한 폴더 구조로 프로젝트를 시작하는 데 필요한 모든 스캐폴딩을 제공하는 시작 템플릿을 제공합니다.
설치 했는지 확인 vue-cli하고 다음 명령을 실행합니다.
$ vue init nuxt-community/starter-template <project-name>
거기 cd에서 응용 프로그램을 실행 npm install하고 실행하면 됩니다.
5. 경로 간 전환을 쉽게 설정
Vue에는 <transition>요소 또는 구성 요소에서 JavaScript 애니메이션, CSS 애니메이션 및 CSS 전환을 간단하게 처리할 수 있는 래퍼 요소가 있습니다.
Vue의 요소와 일반적으로 전환에 대한 복습이 필요한 경우 여기<transition> 에 대한 기사를 작성했습니다 .
Nuxt.js는 각 페이지가 요소로 래핑되는 방식으로 경로를 설정 <transition>하므로 페이지 간에 전환을 간단히 생성할 수 있습니다.
6. 기본적으로 훌륭한 프로젝트 구조 얻기
많은 작은 Vue 응용 프로그램에서 여러 파일에서 가능한 한 최상의 코드 구조를 관리하게 됩니다. 기본 Nuxt.js 애플리케이션 구조는 이해하기 쉬운 방식으로 애플리케이션을 구성하기 위한 훌륭한 출발점을 제공합니다.
다음은 설정하는 몇 가지 주요 디렉토리입니다.
- components — 개별 Vue 구성 요소를 구성할 수 있는 폴더입니다.
- layouts— 기본 애플리케이션 레이아웃을 포함할 폴더입니다.
- pages — 앱의 경로를 포함할 폴더입니다. Nuxt.js는 이 디렉토리 내의 모든 .vue 파일을 읽고 애플리케이션 라우터를 생성합니다.
- store— 앱의 모든 Vuex Store 파일을 포함하는 폴더입니다.
7. 단일 파일 구성 요소를 쉽게 작성
많은 소규모 Vue 프로젝트에서 구성 요소는 모든 페이지의 본문에서 컨테이너 요소를 대상 Vue.component으로 하기 위해 , 다음에 정의됩니다.
new Vue({ el: ‘#container’ })
이것은 JavaScript가 특정 보기를 향상시키는 데만 사용되는 소규모 프로젝트에서 잘 작동합니다. 그러나 더 큰 프로젝트에서는 관리하기 어려워질 수 있습니다.
이러한 모든 문제는 확장자 가 있는 단일 파일 구성 요소 로 해결됩니다. .vue이를 사용하려면 Webpack 및 Babel과 같은 도구를 사용하여 빌드 프로세스를 설정해야 합니다.
8. 추가 작업 없이 ES6/ES7 컴파일 가져오기
Webpack과 함께 Nuxt.js는 Babel과 함께 미리 패키징되어 제공됩니다. Babel은 ES6 및 ES7과 같은 최신 JavaScript 버전을 이전 브라우저에서 실행할 수 있는 JavaScript로 컴파일하는 작업을 처리합니다.
Nuxt.js는 Babel을 설정 .vue하여 태그 내부에 작성하는 모든 파일과 모든 ES6 코드가 <script>모든 브라우저에서 작동하는 JavaScript로 컴파일됩니다.
9. 손쉬운 개발을 위한 자동 업데이트 서버 설정
이 프로세스를 직접 설정하거나 웹 개발자에게 익숙한 change-refresh-change-refresh 프로세스와 비교할 때 Nuxt.js로 개발하는 것은 아주 쉽습니다. 자동 업데이트 개발 서버를 설정합니다.
해당 파일을 개발하고 작업하는 동안 .vueNuxt.js는 Webpack 구성을 사용하여 변경 사항을 확인하고 모든 것을 컴파일합니다.
npm run devNuxt.js 프로젝트 내 에서 명령을 실행할 수 있으며 개발 서버를 설정합니다.
10. Nuxt.js 커뮤니티의 모든 것에 대한 액세스
마지막으로 유용한 라이브러리, 모듈, 스타터 키트 등을 컴파일하여 앱을 훨씬 더 쉽게 만들 수 있는 Nuxt Community 라는 GitHub 컬렉션 이 있습니다.
댓글