Vue.js

[Vue.js] Admin 페이지 만들기

yisj 2021. 7. 10. 11:50

Admin 페이지 만들기

Vue Admin 템플릿 리서치

cool-admin 이라든지 rest-admin 이라든지 깃헙에서 vue.js admin 을 검색해보면 여러 프로젝트가 검색된다. 이 중에서 별이 가장 많은 것을 이용하는 것이 가장 안전할 것이다. 내가 조사한 템플릿은 다음과 같다.

이 중에서, PanJiaChen의 vue-admin-template(vue-element-admin)을 이용하여 데모 페이지를 만들기로 하자. 아무래도 처음부터 다 다시 만드는 것은 어리석은 짓이다.

vue-element-admin

개발

개발은 AWS EC2와 맥북 로컬에서 동시에 진행하기로 하자. 작업의 프로세스는 다음과 같을 것이다.

  1. 로컬에서 devServer를 이용하여 개발한다.
  2. 어느 정도 개발이 완료되어 EC2에서 작동하는지 확인하고 싶다면 EC2에서 프로덕션 빌드를 한 후 디플로이한다.

다시말해, 로컬은 devServer, EC2는 실제 서버가 되는 것이다. 아니면 그냥 Apache2 서버일 수도 있다. 아니면 express 서버를 이용하되, nginx를 이용할 수도 있다.

깃 저장소 클론하고 초기 설정하기

여기서부터는 https://panjiachen.github.io/vue-element-admin-site/guide/을 참조하도록 하자.

깃 저장소 클론하기

$ git clone https://github.com/PanJiaChen/vue-element-admin.git web-robot-admin

초기 설정

  1. package.json 파일을 열어서 프로젝트 명 등을 수정한다.
  2. .git을 지우고 다시 만든다.
  3. README 파일 등을 정리한다.
  4. github에서 새 저장소를 만들고 커밋하여 푸쉬한다.
  5. 로컬에서 깃 저장소를 내려받는다.