지난 포스팅에서는 Vue.js 를 시작하기에 앞서 필요한 프로그램들을 설치했습니다.
이번에는 VsCode 를 사용하기 전 유용한 플러그인을 설치를 먼저 해볼게요. 필수는 아니지만 코딩할때 편하게
할 수 있게끔 도와주니 설치하도록 해요.
위 화면처럼 좌측 아이콘 중 해당 아이콘을 클릭하시고 검색 후 인스톨 해주시면 됩니다.
다음은 설치 해야하는 리스트들 입니다.
view-in-browser : html 파일을 기본 브라우저로 볼 수 있도록 합니다.
vetur: Vuew.js 작업시 편리한 기능들을 제공합니다. (코드 자동완성, 디버깅, 하이라이팅 등...)
HTML Snippets: HTML 태그를 빠르게 작성할 수 있게 도와줍니다.
JS-CSS-HTML Formatters: JS, CSS, HTML의 코드 자동완성 기능을 제공합니다 (사용법 Ctrl + Space)
Vue 2 Snippets: Vue.js 2.0의 코드 지원 및 하이라이팅 기능을 제공합니다.
Vue-beautify: Vue.js 코드에 대한 정리 배치 기능을 제공합니다.
ESLint: 자바스크립트 코드 스타일, 문법 체크 기능을 제공합니다.
Korean Language Pack for Vusual Studio Code : VsCode 한글 패치라고 보시면 됩니다. (선택)
설치가 완료되면 재시작 해주시면 VsCode 에 대한 설정도 일단 마무리 되었습니다.
그럼 이제 프로젝트 생성을 해볼게요.
지난번 설치했던 Vue CLI를 이용해서 만들건데 2가지 방법을 안내해 드릴게요.
1. 커맨드 창에서 프로젝트를 생성할 폴더로 이동 후 vue create [프로젝트명]
2. 커맨드 창에서 vue ui 를 입력해주면 프로젝트 매니저 화면이 열리는데 열리지 않는다면 브라우저 창에서
localhost:8000/project/select 로 이동하시면 됩니다.
초기 화면에서 만들기 버튼을 클릭하여 경로를 설정하면 위에 사진처럼 상세 페이지가 나올거에요. 저기서 패키지 매니저는 yarn으로 선택했습니다. npm보다 yarn 이 실행속도가 빠르다고 해서 yarn을 했습니다.
프리셋은 기본으로 선택하고 프로젝트를 만들었습니다. 완료 후 작업목록에서 사진에 보이는 실행 버튼을 눌러주시면 테스트를 할 수 있는 개발 서버 모드까지 끝났습니다.
확인은 http://localhost:8080 에서 확인해보시면 됩니다.
해당 화면이 보이면 제대로 작동되고 있는거에요.
자 그럼 다시 VsCode 로 돌아가서 좌측 상단에 있는 아이콘 클릭 후 Open Folder를 선택해 생성한 프로젝트 경로를 잡아주도록 합니다. 이제 VsCode 에 프로젝트 설정까지 끝났네요.
저는 src 에 경로에 폴더를 만들어서 정리를 하려합니다. 혹시 이 글을 보시는 분들도 본인이 보기 편하게 정리하면서 작업하시면 좋을듯 합니다. 초반에는 단일 파일로만 작업을 할 예정이라 구조가 크게 중요하지 않습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello vue</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="simple">
<h2>{{message}}</h2>
</div>
<script type="text/javascript">
var model = {
message : '첫 번째 Vue.js'
}
var simple = new Vue({
el : '#simple',
data : model
})
</script>
</body>
</html>
지정한 폴더에 index.html 을 만드시고 한번 실행해 볼까요.
위와 같은 코드를 넣은 파일을 생성하시고 해당 파일에서 우클릭 하시면 View in others Browser 하셔서 크롬을 선택해 열거나 View in Browser 를 선택해 기본 브라우저로 열어주시면 첫 번째 Vue.js 시작을 완성했습니다.
제대로 나오시나요?
다음 포스팅에서는 생성한 index.html 에 대해 정리할까 합니다.
그럼 오늘은 여기까지-!
'Vue.js' 카테고리의 다른 글
| [Vue.js] 1. Vue.js 간단 소개와 설치(VSCode포함) (0) | 2020.02.06 |
|---|
