[vue] 환경설정 및 Vue 프로젝트 생성까지 ( + 폴더구조)

 

1. node.js설치

- 웹개발 라이브러리 설치를 도와주는 npm사용을 위함.

- 난 기존에 설치되어 있어서 생략.

 

2. vue 설치

- 새 터미널 열고

> npm install -g @vue/cli 

 

C:\Users\rosei\AppData\Roaming\npm\vue -> C:\Users\rosei\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
+ @vue/cli@5.0.4
updated 1 package in 51.801s

 

-> 둘 중 하나.

3. 확장프로그램 설치

- vue 3 snippets

- vetur 나 volar 둘 중 하나

  처음에 vetur로 설치했으나 The template root requires exactly one element 에러가 밑줄과 발생되어서 사용안함 처리 후 volar로 변경설치함. (vscode다시 켜야 함)

- HTML CSS Support

 

설치 이후 에러 발생 시 참조 할 글 👇👇👇👇👇

 

https://codingapple.com/unit/vue-3-installation-with-vue-cli/?id=139 

개발환경 셋팅과 Vue 3버전 설치 (자주겪는 에러 포함) - 코딩애플 온라인 강좌

 

 

4. 파일 생성 후 vue프로젝트 생성하기

> vue create 생성할프로젝트명

이렇게 진행하면 vue 프로젝트를 빠르게 생성해준다. 

나는 vue create를 할 때 보안 오류 PSSecurityException 이 발생되었다.

 

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\rosei\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오.

 

라는데 주소가 404..

근데 알고보니 주소가 줄바꿈 되어서 안열리는거였다..(위 링크는 되도록 연결 해 둠)

 

아무튼 나의 경우는 저게 안돼서

혹시 몰라서 vscode를 관리자모드로 실행 후 (이건 필수인지 모르겠음)

> vue.cmd create 생성할프로젝트명

 

위와 같이 뜨면 Default옆에 > 이렇게 화살표 나오는데, 위아래로 이동이 가능하다.

난 vue3을 사용할거기에 화살표 그대로 두고 엔터.

패키지 관리자는 뭘로 할건지 또 선택하라고 함. 난 npm으로 선택.

 

그럼 뭔가 막 설치하기 시작한다. 

그 와중에 이모지 왜케 귀엽..

 

 

5. 설치 완료

설치가 완료 되면 프로젝트 생성 완료했다고 알려주고, 

내가 선택한 폴더안에 vue프로젝트에 필요한 파일들이 자동 생성된 걸 볼 수 있다.

 

흐뭇😊

 

🌼폴더구조 및 설명🌼

🥨 src/App.vue : 메인 페이지. 이 안에 html, css, js역할이 들어있다

- 웹 브라우저는 App.vue 해석이 안돼서 html로 컴파일 해서 동작이 되는데, src/main.js에서 public/index.html 안에 App.vue의 코드를 불러오도록 해서 웹에서 실행되는것이라고 한다.

 

🥨 node_modules 폴더 : 프로젝트에 쓰이는 라이브러리들

🥨 src 폴더 : 소스코드들 들어가는 곳

🥨 public 폴더 : html, 기타파일등이 들어가는 곳

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

 

🌼미리보기🌼

프로젝트를 꼭 오픈하고! 

>npm run serve

 

터미널에 생성된 링크를 클릭하면 - 

App.vue에서 글자를 조금 바꿔주고 실행했다.

안녕 뷰! 반가워 🌼

이름도 아이콘도 넘나 이쁜데, 최애가 되었으면 좋겠다 :)

 

 

 

여기까지 오류발생+검색+ 이 글을 작성하면서 설치해서 좀 걸렸는데, 

설치는 약 30분정도 소요 된 것 같다.