[Vue] Vue시작하기

[Vue] Vue시작하기

Vue.JS는 빠른 Vue.JS프로젝트 생성을 지원하기 위해 공식 CLI(Commnad Line Interface)를 제공한다.

# vue-cli 설치
npm install -g vue-cli
 
# "webpack" 템플릿을 이용해서 새 프로젝트 생성
vue init webpack my-project

위의 두 줄의 명령어만 실행하면 Vue.Js 프로젝트가 생성 됨
Vue CLI를 설치하면 CLI설치후, CLI를 사용하여 Vue.JS 프로젝트를 생성 할 수 있다.
위의 명령어를 실행하면 webpack을 사용한 Vue.JS 프로젝트가 생성된다.

프로젝트 설정

위의 그림과 같이 vue-cli를 통해 프로젝트를 설정하고 프로젝트를 생성한다.
터미널을 켜고 생성된 프로젝트의 디렉토리로 이동하여, npm start 를 shell에 입력하면

default는 8080포트지만, 지금 8080포트를 다른곳에서 사용중이라 8081로 됐다.

위의 그림과 같이 Vue 어플리케이션이 실행된다.
브라우저에 https://localhost:8080을 통해서 접근하면

위의 그림과 같이 실행화면을 볼 수 있다. npm start로 실행된 어플리케이션은 개발용이다
배포버전으로 빌드하기 위해서는 npm run build 명령어를 사용하면 배포버전의 파일이 dist 디렉토리 밑에 생성된다.

또는 http://www.daleseo.com/vue-cli3/ 여기 가볼것


출처

• https://beomy.tistory.com/40