nuxt.js : 실용 가이드

NUXT는 고성능 풀 스택 애플리케이션을보다 쉽게 ​​구축 할 수있는 의견이 많은 VUE 프레임 워크입니다. 라우팅, 비동기 데이터, 미들웨어 처리 등의 복잡한 구성을 처리합니다. 완고한 디렉토리 구조 및 타입 스크립트 지원은 간단하거나 프로덕션 준비된 엔터프라이즈 애플리케이션을 구축하는 데 우수한 개발자 경험이됩니다.

nuxt.js로 시작하는 것

이 섹션에서는 NUXT의 기본 사항을 파는 새로운 NUXT 프로젝트를 만들 것입니다. 설치 프로세스를 소개하고 새로운 프로젝트를 설정하며 디렉토리 구조에 대해 배울 것입니다.

웹 사이트에는 최신 Node.js 버전, 텍스트 편집기 Volar 확장자로서 코드 및 최고의 설정을위한 팁을 포함한 일부 전제 조건이 있습니다.

설치 및 프로젝트 설정

새로운 NUXT 프로젝트를 만들고 다음 명령을 실행하여 새로 생성 된 프로젝트로 이동할 수 있습니다.

 npx nuxi init my-nuxt-project# 새로 생성 된 projectcd my-nuxt-project로 이동

새로 생성 된 폴더에서 다음 명령을 실행하여 종속성을 설치할 수 있습니다.

 # using yarnyarn install# npmnpm install# uisng pnpm# pnpm installpnpm install을 실행하기 전에`.npmrc`에`shamely-hoist = true`가 있는지 확인하십시오.

설치가 완료되면 명령을 실행하여 서버를 시작할 수 있습니다.

 # yarnyarn dev -o# 사용 npmnpm 사용 dev --o# 사용 pnpmpnpm dev -o

이로 인해 http : // localhost/3000 (또는 3000을 사용할 수없는 경우 다른 포트) 용 새 브라우저 창이 열리 며 다음과 같은 내용이 있어야합니다.

디렉토리 구조 및 파일 조직

NUXT는 잘 정의 된 디렉토리 구조를 따라 프로젝트를 구성합니다. 이 조직화 된 구조는 코드베이스의 프로젝트 탐색을보다 쉽게 ​​할 수있을뿐만 아니라 확장 가능 구축을위한 모범 사례를 채택하는 데 도움이됩니다.

프로젝트가 설치된 후 디렉토리 구조입니다.

 my-nuxt project
.nuxt/
├ ─) Public/
favicon.ico
Server/ Server/
TSCONFIG.JSON
.gitignore
.npmrc
├ ── 앱. vue
├ ── Nuxt.config.ts
package.json
├ ── readme.md
TSCONFIG.JSON
└ ─담 yarn.lock

NUXT에 의해 정의 된 디렉토리 구조에 따라 더 많은 폴더와 파일을 추가 할 수 있습니다. 디렉토리 구조 안내서에서 필요한 모든 것을 찾을 수 있습니다.

위 내용은 nuxt.js : 실용 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!