Vue로 블로그 만들기 - 1.셋팅하기

Vue 설치하기

• VS Code에서 생성하고자 하는 폴더를 오픈 후 터미널을 연다

npm install -g @vue/cli

 

프로젝트 폴더 생성하기

• vue 설치를 완료했다면 터미널에서 아래 명령어를 입력한다.

vue create blog(프로젝트명)

 

vue-1폴더 하위에 blog 프로젝트 폴더가 생성되었다.

 

blog 폴더로 이동하기

 

• 터미널에서 아래 명령어를 입력하여 blog 폴더로 이동한다.

cd blog

작업 미리보기

• 터미널에서 아래 명령어를 입력하면 작업중인 것을 미리 볼 수 있다.

npm run serve

 

 

Bootstrap 설치하기

• 이번에는 부트스트랩을 이용하여 UI를 꾸밀 것이기 때문에 부트스트랩을 설치한다.

첫번째 방법 - CDN

• https://getbootstrap.kr/ 에서 우측 상단에 원하는 버전 선택
• CDN link를 publick/index.html 안에 복붙하기
• 아니면 파일을 다운로드 받아서 입력해도 된다.

두번째 방법 - npm (ver.5)

* * 버전마다 설치하는 명령어가 다 다르기 때문에 꼭 공홈에 나와있는대로 설치할 것.

• 기존에 run serve 하던 터미널은 종료 후 새 터미널을 열어 아래 명령어를 입력한다.

npm install 공홈에 나와있는 명령어..

• 설치 후 main.js에 import 한다.

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

 

• 설치가 안전하게 되었다면 npm run serve시 잘 뜬다.

Bootstrap 사용하는 방법

• 홈페이지>Docs에서 만들고자 하는 것을 검색하여 응용한다.