Vue/Firebase 이용해서 홈페이지 만들기 (1) - 개발환경셋팅, Vue프로젝트 생성

오늘의 목표

Vue 사용을 위한 개발환경 셋팅 후 첫 Vue 프로젝트를 만들어 서버를 띄우고 접속해보자.

 

---

#1. 개발환경 셋팅 (npm, vue cli, vscode)

#2. vue 프로젝트 생성

---

#1. 개발환경 셋팅 (npm, vue cli, vscode)

 - npm 설치 (google 에서 node.js 검색 후 나오는 홈페이지에서 설치파일을 받아 설치하자.)

 - vue cli 설치 : npm install -g @vue/cli

 

 - vscode : google에서 vscode 검색 후 나오는 홈페이지에서 다운로드 받고 설치하자 (실제 개발에 필요한 에디터)
   * 유용하게 쓰이는 extension : vuetify(vue 라이브러리), ESLint(자동 문법체크), vetur(소스에 색상 표시)

 

#2. vue 프로젝트 생성

 - 터미널에서 다음의 명령어를 통해 프로젝트를 생성하자 : vue create kyungsnim
   * 추가 옵션은 아래와 같이 선택하였다.

 - 만든 프로젝트로 이동하여 서버를 올려보았다.
   > cd kyungsnim
   > npm run serve

 - 아래와 같이 PC와 모바일에서 접속해보았다. vue 프로젝트 생성 화면이다.

PC/모바일 접속

- vscode를 열어 아래와 같이 소스 수정을 하니 저장하는 즉시 바뀌게 된다. (hot reloading)

최상단에 문구가 들어간 것을 확인할 수 있다.

 

※ 해당 내용은 아래의 사이트에서 강의를 보며 실습한 내용입니다.

memi.dev

 

---