[코딩애플] Vue 로 만드는 직방 / 인스타그램 웹앱 - 클론코딩.1

https://www.youtube.com/watch?v=NONWar0jGLM&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=2

 

- Node.js 설치

- VScode 설치

 

npm install -g @vue/cli

 

 

- vscode extension

  => vetur 설치

  => HTML CSS Support 설치

  => Vue 3 Snippets 설치

 

하고 나서 하려는데 이 강좌는 3년 전 꺼라서 

 

vue

 

입력하면

 

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\---\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ vue
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

 

이렇게 에러가 뜨는데 chatgpt한테 물어보니 

 

관리자 권한으로 PowerShell을 실행한 후, 현재 실행 정책을 확인하려면 다음 명령어를 입력하세요:

Get-ExecutionPolicy

 

 

기본적으로 Restricted나 RemoteSigned로 설정되어 있을 수 있습니다. 이제 실행 정책을 변경해야 합니다.

 

실행 정책을 Unrestricted 또는 Bypass로 변경해야 vue 스크립트를 실행할 수 있습니다. 이를 위해 아래 명령어를 입력하세요:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

 

이렇게 입력해주면 잘 된다.

 

vue create vuedongsan

 

vue3 으로 설정해주면 되고

 

프로젝트 설치 완료후에

 

open Folder로 새로 만든 프로젝트의 폴더로 열어주면 아래와 같이 나온

 

터미널 열어서

 

npm run serve

 

를 입력하면 실행이된다.

 

---설명---

nodejs 설치 이유??? => npm 쓰려고

npm??? => 각종 웹개발 라이브러리 설치 도우미

npm으로 @vue/cli( vue 프로젝트 빠르게 생성해주는 라이브러리)  설치

App.vue가 메인페이지임

App.vue 파일을 HTML로 컴파일해서 index.html에 박아넣고(main.js가 박아넣음) 있음.

 

node_modules => 프로젝트 라이브러리들

src : 소스코드 다 담는 곳

public : html 파일, 기타파일 보관

package.json : 라이브러리 버전, 프로젝트 설정 기록