24-02-01-thu : vue. 이창호교수님

[2sjdeveloper]

1교시

• MVVM 패턴

• 프로그램 추가하기.

• 폴더 생성

• 명령프롬프트에서 D:\Dev\vue-workspace 로 이동 후(vue-workspace가 설치된 곳으로 이동하면 됨) 책 44쪽부터 실행(아래 코드 순서)

  1. npm install -g @vue/cli
  2. vue
  3. vue create vue-project
  4. 버전 3 선택 -> 폴더 안에 이것저것 파일들 생성됨.

• vue 프로젝트 생성(47쪽)

  1. npm run serve
  2. 명령프롬프트에서 로컬 포트 참고하여 주소창에 입력

[2sjdeveloper]

• 비주얼에서 vue-project 폴더 열어줌

• 자동으로 생성되어있는 파일들 살펴봄. 그때 봐야하는 순서.

• 이거 설치

[2sjdeveloper]

2교시

• http://localhost:8081/ 화면과 이것들 보는중

• 책 46~48쪽

• 명령프롬프트에서 기존 작업 끝내고(컨트롤+C) vue-project로 폴더 이동해서 새 프로젝트 생성해보기(책 51쪽~)

• 생성하고 비주얼에서 오픈 폴더 -> vue-project-manually 열기

• 명령프롬프트에서 실행

  
  D:\Dev\vue-workspace>cd vue-project-manually

D:\Dev\vue-workspace\vue-project-manually>npm run serve

vue-project-manually@0.1.0 serve vue-cli-service serve

INFO Starting development server...

DONE Compiled successfully in 2764ms 오전 10:25:23

App running at:

• Local: http://localhost:8081/

• Network: http://192.168.0.33:8081/

  Note that the development build is not optimized. To create a production build, run npm run build.

  
  http://localhost:8081/

[2sjdeveloper]

• 책 57쪽~

• GUI 환경에서 새 프로젝트 만들기 (책 따라서 만들기) 세가지 버전으로 프로젝트 만들기 해봤음.

• 다시 명령프롬프트에서 vue-project 로 다시 돌아와서 npm run serve 해줌

• 명령 프롬프트 하나 더 열어서 라우터 설치(책 73쪽~)

  
  Microsoft Windows [Version 10.0.19045.3930]
  (c) Microsoft Corporation. All rights reserved.

C:\Users\admin>cd /

C:>cd d: D:\

C:>d:

D:>cd dev

D:\Dev>cd vue-workspace

D:\Dev\vue-workspace>vue add router

📦 Installing @vue/cli-plugin-router...

added 114 packages in 3s

20 packages are looking for funding run npm fund for details ✔ Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

🚀 Invoking generator for @vue/cli-plugin-router... ERROR Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' from 'D:\Dev\vue-workspace\node_modules\@vue\cli-plugin-router\generator\template\src' Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' from 'D:\Dev\vue-workspace\node_modules\@vue\cli-plugin-router\generator\template\src' at Function.resolveSync [as sync] (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\resolve\lib\sync.js:111:15) at renderFile (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\GeneratorAPI.js:518:17) at C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\GeneratorAPI.js:303:27 at async Generator.resolveFiles (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:313:7) at async Generator.generate (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:205:5) at async runGenerator (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:111:3) at async invoke (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:92:3)

D:\Dev\vue-workspace>cd vue-project

D:\Dev\vue-workspace\vue-project>vue add router WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first. ? Still proceed? Yes

📦 Installing @vue/cli-plugin-router...

up to date, audited 970 packages in 3s

110 packages are looking for funding run npm fund for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run: npm audit fix --force

Run npm audit for details. ✔ Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

🚀 Invoking generator for @vue/cli-plugin-router... 📦 Installing additional dependencies...

added 2 packages, and audited 972 packages in 1s

111 packages are looking for funding run npm fund for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run: npm audit fix --force

Run npm audit for details. ⚓ Running completion hooks...

✔ Successfully invoked generator for plugin: @vue/cli-plugin-router

D:\Dev\vue-workspace\vue-project>

[2sjdeveloper]

• 이거 다시 열어줌

[2sjdeveloper]

• 여기서 데이터 바인딩 추가.

[2sjdeveloper]

3교시

• 2교시 이어서

• 뷰 폴더 안에 데이터바인딩.뷰 파일 생성

• 복사,붙여넣기해서 2 만듦

[2sjdeveloper]

4교시

• 3교시 이어서 데이터바인딩1,2 파일들에 이것저것 입력..
• 아까처럼 데이터바인딩2 복붙해서 데이터바인딩3 파일 만듦.
• 새로 파일 만들때마다 저기서 입력값 2, 3 으로 바꿔줘야됨(도메인값과 연결해주기 위함)

[2sjdeveloper]

5교시

• 3 복붙해서 DataBinding4.vue 만들고 라우트값도 4로 바꿔줌.

• 책 91쪽

• AboutView.vue 복붙해서 이름은 DataBidingList.vue로 바꿈

[2sjdeveloper]

6교시

[2sjdeveloper]

7교시

• 책 116쪽~
• 이벤트 처리
• EventClick.vue 파일 생성

-EventTodo.vue 파일 생성

[2sjdeveloper]

8교시

• 책 120쪽~

• ComputedView.vue 파일 생성

• 안되면 서버 종료(컨트롤+C) 하고 다시 시작 npm run serve