소개

Vue.js에 대해 많은 기사가 있지만
장을 나누어 로컬 환경에서 FCM과 제휴까지 기사를 써 갑니다.

이번에는 「로컬 환경」에서 Vue.js의 템플릿을 이용한 사이트를 작성해 갑니다.

배울 수 있는 것

Vue.js 개발 환경의 토대 만들기

기초를 만들기 위해 "vue-cli"로 프로젝트를 구축하는 방법

환경 구축

개발 환경

macbook pro

iTerm2 (편리합니다)

이용하는 언어 환경/환경

node 공식 링크

npm

vul-cli (version3)

Vue.js 개발 환경의 토대 만들기

Vue.js를 실행하려면 Webpack 환경 등을 구축해야 하는데 시간이 걸리는 곳이기도 합니다.
그래서 Vue.js의 CLI (Command Line Interface)를 사용하여 사이트 구축 템플릿을 다운로드하여 개발합니다. 이번에는 vue-cli를 사용하여 Vue를 움직여갑니다.

vue-cli3 설치

공식 사이트
공식적으로는 「npm install -g @vue/cli-service-global」라고 써 있습니다만
설치 후에 명령을 두드려도 반응하지 않는 것이 있었으므로 명령의 내용을 변경하고 있습니다.

npm install -g @vue/cli

vue 프로젝트 만들기

vue create sample

※ sample은 프로젝트명

고급 설정

명령을 실행하면 프로젝트를 만드는 데 필요한 정보를 요청합니다.
간단한 설정으로 시작합니다.

라이브러리 선택

default:babel, eslint를 설치합니다. ← default 선택

Manually select features: 도입할 라이브러리를 선택할 수 있습니다. typescript나 webpack 등을 설정하여 설치할 수 있다.

완성!

성공하면 아래 화면이 표시됩니다.
폴더를 이동해 명령을 두드리는 것으로 서버가 일어나 사이트가 완성됩니다.

서버 시작

packege.json에 나열된 명령을 두드려 서버/사이트를 시작합니다.

npm run serve

표시되는 화면

결론

생각했던 만큼 쉽게 vu 환경을 구축할 수 있었습니다.
다음 번은 Vue.js로 사이트가 생겼으므로 FCM의 기능과 연결해 갑니다.