[Windows] Vue.js 설치 및 Vue 프로젝트 생성

[Windows] Vue.js 설치 및 Vue 프로젝트 생성

 

Vue.js는 웹 개발을 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크로 페이지 새로고침 없이 UI변경이 가능하다.  초보자가 사용하기 편리하며, React.js나 Angular.js에 비해 배우기 쉽다. Angular는 Typescript를 강제로 써야하며, React는 javascript 문법을 많이 사용한다(Javascript에 취약하다면 힘들 수 있다.). Vue는 새로운 문법을 사용해야 하지만 간단하고 빠르게 배울수 있다. 렌더링 속도 또한 다른 프레임워크과 비교하여 뒤지지 않으며 라이브러리 지원 업데이트도 지속적으로 하는 안정적인 프레임워크다.

Vue.js는 NPM(Node Package Manager)을 통해서 다운로드 가능하므로 아래 링크를 확인하여 Node.js를 설치하자.

[Windows] Node.js 및 NPM 설치

 

에디터 사용을 위해 아래 링크를 확인하여 VS Code (Visual Studio Code)를 설치하자.

[Windows] Visual Studio Code (VS Code) 설치하기

 

바탕화면에 vue 폴더를 하나 생성하였다.

VS Code 에디터를 실행하여 File - Open Folder를 클릭하여 바탕화면에 생성된 vue 디렉토리를 선택한다.

File - Open Folder

왼쪽 EXPLORER에 vue디렉토리가 보인다 Ctrl + ` 타이핑 하거나 Terminal - New Terminal을 선택하여 Terminal 창을 연다.

 

• vue/cli 설치 (개발환경 세팅 프로그램)

 > npm install -g @vue/cli

 

• vue/cli 설치 확인

> npm ls -g

 

• vue 프로젝트 생성

> vue create test1

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\user\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다.
위치 줄:1 문자:1
+ vue create test1
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

Power Shell 터미널에서 Vue 명령어 사용시 위와 같은 오류가 발생할 수 있다.  세가지 해결 방법이 있으니 선택하여 사용

      1. Git-Bash로 실행 (Git을 설치하여 Git-Bash가 있는 경우)

      2. PowerShell 아래 명령어로 대체

> vue.cmd create test1

 

      3. PowerShell 관리자로 실행 후 정책변경

> Set-ExecutionPolicy Unrestricted

위 문제를 해결하면 아래와 같이 Vue 프로젝트의 기본설정을 할 수 있는데 우선 기본인 Vue 3을 선택한다. (방향키로 선택 후 엔터)

생성된 Vue test1 프로젝트

 

• 프로젝트 디렉토리 오픈
  File - Open Folder를 클릭하여 바탕화면에 생성된 vue\test1 디렉토리를 선택한다.

 

• 프로젝트 실행
  Ctrl + ` 타이핑 하거나 Terminal - New Terminal을 선택하여 Terminal 창을 연다.

> npm run serve

Terminal안의 주소를 Ctrl + click 하거나, 브라우저를 열어 실행된 어플리케이션을 확인해보자.

http://localhost:8080

 

• 기본 소스코드 수정
  프로젝트 - src - App.vue 파일은 프로젝트의 메인페이지다. Template안의 HelloWorld msg를 아래와 같이 수정하여 정상적으로 서버에 적용되는지 확인해보자.

<HelloWorld msg="Hello Vue World"/>

 

• VS Code 에디터 부가기능 설치 (Vetur, Vue 3 Snippets, HTML CSS Support)
  개발을 쉽게 도와주는 확장 프로그램으로 필수 설치는 아니다.

Vetur

Vue 3 Snippets

HTML CSS Supoort

이로써 윈도우에 Vue.js를 설치하고 VS Code를 이용하여 Vue 프로젝트를 생성 및 실행해보았다.