본문 바로가기

a memorandum/찢어진 개발 일지

[install] Nuxt 설치 및 개발 환경 설정

 1. Front-End Skill Stack

  - node 8.0+

  - npm 5.0+

  - vue

  - vue-cli

  - nuxt.js

  - scss

  - bootstrap 3


개인적으로 프론트엔드 개발 환경을 설정하기 위해 기술 스택을 적어두었는데 스택에 대한 간단한 설명을 기록한다. node와 npm은 앞 글에서 설치했으므로 넘어간다.


① vue

현재 트렌드를 주도하고 있는 3대 프론트 프레임워크로 Angular, React, Vue가 있는데 셋 중 가장 늦게 출시되었다. 단순 HTML, CSS, javascript 정도만 알고 있어도 충분히 응용할 수 있을 정도로 진입 장벽이 낮다.


② vue-cli

vue 프로젝트를 간단히 스캐폴딩 해주는 커맨드 라인 인터페이스.


③ nuxt.js

vue 어플리케이션을 간단하게 구성해주는 프레임워크. 자세한 설명은 https://ko.nuxtjs.org/guide에서 참조.


 scss

css의 부족한 부분을 확장시킨 css 확장 언어. 규모가 커질 수록 효율성을 올려준다.


 bootstrap 3

반응형 웹 사이트 레이아웃을 지원하는 프레임워크.


2. vue 설치하기

  - vue

  - vue/cli

  - vue/cli-init


workspace 폴더에서 cmd 혹은 터미널을 실행하여 아래 커맨드라인을 입력한다.


npm install -g @vue/cli @vue/cli-init

vue -V


3. nuxt.js 설치하기

  - https://github.com/nuxt-community/starter-template


기본적으로 nuxt.js에서 제공하는 템플릿이 있다. 위 주소에 접속하여 Installation을 따라하면 된다.


vue init nuxt-community/starter-template my-project  

cd my-project

npm install

npm run dev


순서대로 커맨드라인을 입력하면 하나의 nuxt.js 어플리케이션이 완성되고, localhost로 초기 화면을 띄울 수 있다!


4. scss 적용하기


npm install node-sass

npm install sass-loader


위 순서대로 명령어를 입력하면 scss를 사용할 수 있다.


5. bootstrap 3

 - https://getbootstrap.com/docs/3.4/getting-started/#download


기본적으로 bootstrap은 less를 사용하기 때문에 위 주소로 접속하여 download Sass를 다운 받아 압축을 푼다.


그리고 assets 폴더에 들어가서 fonts, stylesheets를 복사한다. 그리고 위에서 생성한 nuxt.js 어플리케이션 폴더를 열어 assets 폴더 안에 붙여넣는다.


그 후, nuxt.config.js 파일을 열어서 아래와 같이 추가한다.


module.exports = {

    ...

    css: [

        {src: '~/assets/stylesheets/bootstrap.scss', lang: 'scss'}

    ],

    ...

}


여기까지 설정했으면 bootstrap에 사용되는 class name을 전역으로 사용할 수 있게 된다.