Vue.js To Do List 만들기 #1 프로젝트 생성

Vue.js To Do List 만들기 #1 프로젝트 생성

---

Vue.js로 To do list 만들기

난 이미 포스팅을 하기 전 책을 보고 한번 쭉 따라 만들어보았다. 지겨운 To Do List 이다. 구글에 "Vuejs to do list" 라고 검색하면 수많은 검색결과가 나온다. 그만큼 간단하지만 매우 중요한 것을 담고 있는 예제라는 것을 증명하는 것이라 생각된다. 실제로 한번 따라해보니 CRUD(Create, Read, Update, Delete)를 모두 경험할 수 있었다. 프로젝트를 통해 경험하는 것이 가장 학습에 도움이 되겠지만 실무에서는 사용 할일이 없다보니 제한적이다. 때문에 사이드 프로젝트를 통해 익숙해져야 하는데 아직은 문법도 익숙치 않으니 To Do List를 한번 더 만들어보려고 한다. 

 

구글 vuejs to do list 검색 결과

---

설치, 프로젝트 생성

이 예제에서는 웹팩(webpack)이나 브라우저리파이(browserify)같은 모듈 번들러는 사용하지 않고 Vue-CLI를 사용한다. Vue-CLI를 사용하면 뷰 어플리케이션을 개발하기 위한 초기 프로젝트 구조를 쉽게 구성할 수 있다. Vue-CLI를 설치하려면 Node.js가 설치되어 있어야 한다. https://nodejs.org/ko/ 에 접속하여 설치할 수 있다. 인스톨 후에 잘 설치되었나 확인하기 위하여 명령 프롬프트 창(cmd)을 열어 node -v를 입력한다.

 

Node.js 버전 확인 (10.16.0 버전임을 확인할 수 있다.)

설치된 버전이 노출되면 Node.js가 잘 설치된 것이다. 참고로 Vue-CLI를 사용하기 위해서는 6.x이상의 Node.js가 설치되어 있어야 한다. 다음은 Vue-CLI를 설치해야 하는데 cmd창에서 npm install vue-cli -global 라고 입력하면 설치가 진행되고, 설치가 완료되면 vue 라고 입력하여 잘 설치되었는지 확인할 수 있다.

 

vue명령어를 통해 vue-cli가 잘 설치되었는지 확인할 수 있다.

vue 프로젝트 템플릿은 6종류(webpack, webpack-simple, browserify, broweserify-simple, simple, pwa)가 있는데 여기서는 webpack-simple 템플릿을 사용한다. 프로젝트 폴더를 하나 생성 후 빈폴더에서 cmd창을 열어 vue init webpack-simple을 입력한다. 그럼 아래와 같이 6가지 질문을 하고 설치가 완료된다.

? Generate project in current directory?
//현재 디렉토리에 프로젝트를 생성하는가

? Project name
//프로젝트 이름

? Project description
//프로젝트 설명

? Author
//작성자

? License
//라이선스 유형

? Use sass?
//SASS를 사용할 것인가

vue 프로젝트 설치 시 나오는 질문

설치가 완료되면 빈폴더에 아래와 같이 파일들이 생성된다.

 

webpack-simple설치 후 생성된 파일

다음, cmd창에 npm install을 입력하면 뷰 애플리케이션을 구동하기 위한 관련 라이브러리를 모두 다운로드 되고, npm run dev 라고 입력하면 자동으로 브라우저가 실행되며 초기 페이지가 보여진다.

 

vue-CLI 설치 후 프로젝트 실행 (웹 브라우저)

테스트를 위한 프로젝트 생성이 완료되었다. 다시 과정을 정리해보면,

 

1. vue-CLI 설치 npm install vue-cli -g
2. 프로젝트 생성 vue init webpack-simple
3. 관련 라이브러리 설치 npm install
4. 프로젝트 구동 npm run dev

(계속..)

 

2019/07/24 - [vue.js] - vue.js 입문

vue.js 입문

2019/08/30 - [업무 도움되는] - 변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style

변수, 함수, 클래스, 아이디 네이밍 스타일 / variable, function, class, id naming style

2019/08/28 - [JavaScript] - 강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)

강제로 body 스크롤막기 (PC, Mobile (iOS, Android..) 모든 환경)

2019/09/03 - [UI 클론(Clone)] - 구글 로그인 인풋박스(Google Login Inputbox) UI Clone

구글 로그인 인풋박스(Google Login Inputbox) UI Clone