NUXT js 시작하기

thgus·2022년 11월 10일
0

vue created <'project-name'>

node js 설치 (v 16)

  • vscode > bash에서 작성했다.

Vue cli 전역 설치 (cmd > npm install -g @vue/cli @vue/cli-init )
$ vue init nuxt-community/starter-template
cd
npm install
npm run dev

▲ 전역을 설치해두면 하단처럼 컴포넌트 에셋 스태틱 등의 폴더를 직접 만들지 않아도 됐다. 쿵...

mkdir <project_name>
cd <project_name>
						// echo $null > package.json 파워셀에서는 이걸 사용
touch package.json
npm init --yes 			// ~~먼저 package.json 를 만들지 않아도 될 듯~~ **만들어야했다**
npm install nuxt

mkdir pages //폴더 생성
touch pages/index.vue // pages 폴더에 index.vue를 만든다. cd로 pages 폴더에 있으면 index.vue만 적어도 된다.
<template>
  <h1>Hello world!</h1>
</template>

를 index.vue에 넣고...

npm run dev 

http://localhost:3000 까지 뜨면 프로젝트 시작 성공이다.

시작까지 생각보다 시간이 많이 걸렸는데 node 버전이 16이어야했다.

> mkdir components assets static
  • components | 공통으로 불러오는 소스들? 이 있는 폴더 ( 모든 Vue.js 구성 요소를 넣은 다음 페이지로 가져오는 곳 )
    Vue.js 구성요소가 포함되어있다. 페이지의 다른 부분을 구성하는 것으로 페이지, 레이아웃 및 기타 구성요소에 재사용 및 가져올 수 있다. layout.css 같은 것들이 들어있는 걸까?
  • assets | 기본으로 사용되는 css js images 폴더 장소
    -static ... 이것과 pages 의 구분이 아직 어렵다. pages는 html 폴더들이 위치하는 자리라고 한다.
touch nuxt.config.js

Nuxt 애플리케이션을 구축할 때 사용하는 기본 디렉토리와 파일이다.
Nuxt 는 파일 트리를 설정하지 않고 자기가 직접 애플리케이션 라우터를 만들어준다고 한다.

profile
어쩌다보니IT

0개의 댓글