TODO 프로젝트 – 1. 시작전 환경 설정

이 프로젝트는 Todo Project 입니다.
회원 가입을 하고 Todo를 등록하고 관리할 수 있습니다.
이 프로젝트는 Node Express + VueJS + Mysql 을 학습하기 위해 만들었습니다.
기존의 있던 Todo Project에서 이어집니다.
아래 사이트를 참고하였습니다.
http://vuejs.kr/2017/02/05/express-with-vue/

1.폴더 구조

APP
– backend (Node.js Express 사용)
– frontend (Vue.js 사용)

2.프로그램 설치

기본적으로 NPM을 설치합니다.
backend에서는 express를 설치하고, frontend에서는 vue를 설치합니다.
https://www.npmjs.com/

2-1.backend 설치

npm install express-generator -g
express --view=jade backend
cd backend
npm install
npm start

2-2.frontend 설치

npm install -g vue-cli
vue init webpack frontend
cd frontend
npm install

추가로 mysql을 설치하고 npm 라이브러리도 추가합니다.
https://www.mysql.com/downloads

npm install mysql

2.페이지 퍼블리싱

vue 파일에 바로 퍼블리싱 할 수도 있고, 따로 퍼블리싱을 할 수도 있습니다.
따로 퍼블리싱을 진행합니다.

2-1.메뉴 구조도

Home
– About (Home으로 사용)
– List (Todo 리스트)
– Add (Todo 추가)
– Login / Logout (로그인 여부에 따라 노출처리)

2-2.퍼블리싱

todo