Vue 웹 채팅 애플리케이션 만들기 4

로그인 화면 만들기

1. Vuelidate 설치

npm install --save vuelidate

2. plugin 파일 생성

quasar new plugin vuelidate

3. plugin 파일 편집

/src/plugins/vuelidate.js

4. quasar.conf.js 파일 편집

5. page 파일 생성

quasar new page Login

6. page 파일 편집

src/pages/Login.vue

7. router 파일 편집

src/router/router.js

8. 결과 화면 확인

quasar dev
localhost:8080/#/login

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^


* Vue를 이용한 웹 채팅 애플리케이션 만들기 목록

Vue 웹 채팅 애플리케이션 만들기 3

Quasar 설치하기

1. Quasar CLI를 설치합니다.

- npm install -g quasar-cli

2. Quasar CLI를 사용해서 프로젝트를 생성합니다.

- mkdir vue-chat & cd vue-chat
- quasar init client

3. 프로젝트를 실행합니다.

- cd client
- quasar dev

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^


* Vue를 이용한 웹 채팅 애플리케이션 만들기 목록

Visual Studio Code 사용하기

Visual Studio Code 설치

1. Visual Studio Code를 다운로드 받습니다.

- 다운로드 위치: https://code.visualstudio.com/
- 빨간색으로 표시된 부분을 클릭해서 설치파일을 다운로드 받습니다.

2. 다운로드가 완료되면 파일을 더블 클릭해서 VS Code를 설치합니다.

- 빨간색으로 표시된 부분을 계속 클릭하면 설치가 완료됩니다.

3. 설치가 완료되면 VS Code를 실행하고 Vetur 플러그인을 설치합니다.

- 빨간색으로 표시된 부분을 계속 클릭하면 설치가 완료됩니다.

4. Vue 프로젝트 폴더를 추가합니다.

읽어주셔서 감사합니다. 행복한 오늘을 보내시기 바랍니다.^^