고정 헤더 영역
상세 컨텐츠
본문
Nuxt.js란
- 일반적인 Vue.js 어플리케이션을 만드는 프레임워크
- 2016년 10월 25일, zeit.co의 개발팀이 Next.js 프레임워크를 발표한 후 Next.js 처럼 서버사이드 렌더링 Vue.js 어플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 Nuxt.js가 탄생했다.
cf) Next.js : React로 만드는 서버사이드 렌더링 프레임워크
cf) SSR(Server Side Rendering) : 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법
Nuxt.js의 특징
- Vue 파일 사용(*.vue)
- 코드 분할 자동화
- 서버 사이드 렌더링
- 비동기 데이터 기반의 강력한 라우팅 시스템
- 정적 파일 전송
- ES2015+ 지원
- JS & CSS 코드 번들링 및 압축
- <head> 요소 관리 (<title>, <meta>, 기타.)
- 개발 중 Hot module 대체
- 전 처리기 지원: SASS, LESS, Stylus 등
- HTTP/2 푸시 헤더 준비
- 모듈식 아키텍처 확장
다른 내용들은 공식문서를 참고하자
https://develop365.gitlab.io/nuxtjs-0.10.7-doc/ko/guide/
소개 - Nuxt.js
2016년 10월 25일, zeit.co의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한 프레임워크인 Next.js 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 Vue.js 애플리케
develop365.gitlab.io
Nuxt.js 설치
1. Visual Studio Code 설치
- 운영체제에 맞는 파일을 다운받아서 설치하기
✔ https://code.visualstudio.com/
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
2. Node.js 설치
- VSCode와 마찬가지로 운영체제에 맞춰 원하는 버전으로 설치한다.
(참고로 나는 v.14.18.2을 다운받았다.)
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
3. Yarn 설치
- Yarn 패키지를 활용하여 Nuxt.js 를 설치할 예정이기때문에 Yarn Package를 설치한다.
$ npm install -g yarncf) yarn 버전 확인
$ yarn --version
4. Nuxt.js 설치 및 프로젝트 생성
- VSCode Terminal을 열어 프로젝트 생성하기
$ yarn create nuxt-app <project-name>
✔ 나는 명령어 실행 전 워크스페이스로 사용할 디렉토리를 먼저 생성한 후 VSCode로 해당 디렉토리를 열어서 진행했다.
- 명령어 실행 후엔 프로젝트 환경을 설정할 수 있다.
[프로젝트 환경설정 사진]
4. 프로젝트 실행
- 생성된 프로젝트 디렉토리로 이동한 후 프로젝트 실행 명령어 입력
yarn dev
5. 확인
- http://localhost:3000/ 로 접속하여 확인
'Programming > Vue.js' 카테고리의 다른 글
| Vuetify - 삽질 기록(v-select 에서 선택한 값 객체 통으로 리턴하기) (0) | 2022.04.24 |
|---|---|
| Vue.js - Vuex (0) | 2022.03.16 |
| Vue.js 시작하기 - Components Communication (0) | 2022.03.07 |
| Vue.js 시작하기 - Components (0) | 2022.03.07 |
| Vue.js 시작하기 - Template (0) | 2022.03.07 |
댓글 영역