Nuxt 블로그

블로그 서비스 제작 튜토리얼

Nuxt.js 프레임워크를 활용하여 블로그 서비스를 제작해봅니다.

프로젝트 ZIP

아래에서 다룰 과정을 건너 띄고 바로 프로젝트를 시작하고 싶다면 Zip 파일을 다운로드 받아 시작합니다. 프로젝트 생성 과정부터 직접 해보고자 한다면 프로젝트 생성으로 이동합니다.

NuxtBlog 프로젝트 Zip 파일을 다운로드 받아 압축을 푼 후, 프로젝트 루트에서 다음 명령을 실행합니다.

$ cd client
$ mkdir assets/ components/ middleware/ plugins/ store/
$ cd ../ && yarn

Zip 파일을 다운로드 받았다면 아래 과정은 필요 없습니다.

프로젝트 생성

create-nuxt-app 명령을 사용하여 프로젝트를 생성합니다. (시작하기 참고)

$ create-nuxt-app NuxtBlog

프로젝트 디렉토리 정리

client 디렉토리를 명령으로 만든 후, 클라이언트 개발과 관련된 디렉토리를 모두 이동합니다. (client 정리 참고)

$ mkdir client
$ mv assets components layouts middleware pages plugins static store client/

nuxt.config.js 파일을 열어 srcDir 속성 값을 'client'로 설정한 후 저장합니다.

nuxt.config.js
export default {
srcDir: 'client'
}

README.md 제거

client 디렉토리 내에 있는 모든 README.md를 제거합니다.

$ cd client && rm **/README.md

Pug, Sass 설치

Pug, Sass를 프로젝트에 사용하려면 필요한 패키지를 설치합니다. (Pug / Sass 설정 참고)

$ yarn add -D pug pug-plain-loader node-sass sass-loader

파일 정리

프로젝트 생성 시 작성된 템플릿 코드를 모두 정리합니다. (<style> 제거, <template> 내부 코드 제거)

  • client/layouts/default.vue

  • client/pages/index.vue

client/components/Logo.vue 파일을 제거합니다.

IE 호환 설정

IE 호환설정을 참고하여 browserlistautoprefixer를 프로젝트에 설정합니다.

package.json
{
"scripts": {
"browserslist": "browserslist"
},
"browserslist": [
"last 2 version",
"android >= 4.4",
"IE >= 10"
],
}
nuxt.config.js
build: {
postcss: {
plugins: {
'postcss-preset-env': {
autoprefixer: { grid: true }
}
}
},
// ...
}