[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을 전역으로 사용할 수 있게 된다.