Nuxt.js 작동: Vue.js 서버 측 렌더링 프레임워크-JS 튜토리얼-php.cn

Nuxt.js in action: Vue.js server-side rendering framework

Nuxt.js 프로젝트 생성

먼저 Node.js와 Yarn 또는 npm이 설치되어 있는지 확인하세요. 그런 다음 명령줄을 통해 새 Nuxt.js 프로젝트를 만듭니다.

yarn create nuxt-app my-nuxt-project
cd my-nuxt-project

로그인 후 복사

생성 과정에서 UI 프레임워크, 전처리기 등의 옵션이 필요한지 여부를 선택하고 필요에 따라 구성할 수 있습니다.

디렉토리 구조

Nuxt.js는 특정 디렉토리 구조를 따르며, 주요 디렉토리 중 일부는 다음과 같습니다:

├── .nuxt/ # Automatically generated files, including compiled code and configuration
├── assets/ # Used to store uncompiled static resources, such as CSS, images, fonts
├── components/ # Custom Vue components
├── layouts/ # Application layout files, defining the general structure of the page
│ └── default.vue # Default layout
├── middleware/ # Middleware files
├── pages/ # Application routes and views, each file corresponds to a route
│ ├── index.vue # Default homepage
│ └── [slug].vue # Dynamic routing example
├── plugins/ # Custom Vue.js plugins
├── static/ # Static resources, will be copied to the output directory as is
├── store/ # Vuex state management file
│ ├── actions.js # Vuex actions
│ ├── mutations.js # Vuex mutations
│ ├── getters.js # Vuex getters
│ └── index.js # Vuex store entry file
├── nuxt.config.js # Nuxt.js configuration file
├── package.json # Project dependencies and scripts
└── yarn.lock # Or npm.lock, record dependency versions

로그인 후 복사

.nuxt/: 이 디렉터리는 자동으로 생성되며 컴파일된 코드를 포함합니다. 일반적으로 직접 수정할 필요는 없습니다.
자산/: CSS, JavaScript, 이미지 등 컴파일되지 않은 정적 리소스를 저장합니다. Nuxt.js는 빌드 중에 이러한 리소스를 처리합니다.
Components/: 애플리케이션의 다른 부분에서 재사용할 수 있는 사용자 정의 Vue 구성 요소를 저장합니다.
레이아웃/: 페이지의 레이아웃을 정의합니다. 기본 레이아웃이 있을 수도 있고 특정 레이아웃이 여러 개 있을 수도 있습니다.
페이지/: 각 파일은 경로에 해당하며 파일 이름은 경로 이름입니다. 동적 경로는 대괄호 []로 표시됩니다.
middleware/: 페이지 렌더링 전후에 로직을 실행할 수 있는 사용자 정의 미들웨어를 배치합니다.
플러그인/: Vue.js 플러그인을 위한 사용자 정의 항목 파일입니다.
static/: 아무런 처리 없이 빌드 출력 디렉터리에 직접 복사되며, robots.txt 또는 favicon.ico 등을 저장하는 데 자주 사용됩니다.
store/: Vuex 상태 관리 디렉토리, 액션, 변이, getter 및 전체 스토어의 항목 파일을 저장합니다.
nuxt.config.js: 프로젝트 설정을 사용자 정의하는 데 사용되는 Nuxt.js 구성 파일입니다.
package.json: 프로젝트 종속성 및 스크립트 구성.
Yarn.lock 또는 npm.lock: 프로젝트 종속성의 정확한 버전을 기록하여 다양한 환경에서 종속성 일관성을 보장합니다.

페이지 렌더링

pages/ 디렉터리에 index.vue 파일을 만듭니다. 애플리케이션 홈페이지는 다음과 같습니다.

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Hello from Nuxt.js SSR</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'This content is server-rendered!'
    };
  },
  asyncData() {
    // Here you can get data on the server side
    // The returned data will be used as the default value of data
    return { message: 'Data fetched on server' };
  }
};
</script>

로그인 후 복사

Nuxt.js 페이지 렌더링 프로세스는 서버 측 렌더링(SSR)과 클라이언트 측 렌더링(CSR)의 두 가지 주요 단계로 나뉩니다. Nuxt.js 페이지 렌더링의 세부 단계는 다음과 같습니다.