간단한 영상 스트리밍 앱 만들기

vue-cli로 앱 만들기

$ vue create hello
// Vue Version 3를 선택한다
$ vue add router
$ vue add element-plus
// Import on Demand와 en을 선택한다

element-plus 스타일이 적용되지 않는 에러 해결하기

172... 로 시작하는 IP 주소는 AWS EC2의 프라이빗 IP 주소이다. 이것을 퍼블릭 IP 주소, 탄력적 IP 주소로 바꿔줘야 한다.
그러나 더 좋은 것은... 서버에서 실행할 것이 아니라, production으로 빌드된 Vue.js 앱을 그냥 static으로 전송하는 것이다. 그렇지 않을까? 그렇다면 이 에러는 굳이 해결할 필요가 없는 에러이다.

router 설정하기

이 앱에는 다음 두 개의 라우트가 있다.
/share
/watch

view component 만들기

src/views/에 About.vue와 Home.vue가 있다. 각각 복사하여 Share.vue, Watch.vue를 만든다.

$ cp About.vue Share.vue
$ cp About.vue Watch.vue