[Vue.js] VUE.JS 시작하기(다운/설정/VS CODE 연결)

 

1. VUE.JS를 시작하기 위해 우선(시작하기 — Vue.js (vuejs.org))페이지에 들어간다. 

시작하기 — Vue.js

 

2. Vue.js는 단일 페이지 애플리케이션를 빠르게 구축할 수 있는 CLI를 제공한다. 왼쪽 [설치하기] -> [CLI]를 선택한다. 

Home | Vue CLI (vuejs.org)

Vue CLI

다음 페이지에서 GET STARTED 를 누르고 왼쪽 탭의 [Installation]을 눌러 내용을 확인한다.

 

Installation에 대한 설명을 볼 수 있다.

Vue.js도 제이쿼리처럼 HTML 파일 안에서 url 경로를 포함시켜 CDN으로부터 Vue 라이브러리를 불러와 시작할 수 있다.

이제 페이지를 보며 설정을 그래도 따라하면 된다.

 

 

그 전에 ......별다른 설정 변경 하지 않았으면 기본 Restricted 기준인데 이걸 Unrestricted로 지정해줘야한다.

"Windows PowerShell(관리자)"를 실행한다.(윈도우 기준 )

콘솔창에

Set-ExcutionPolicy Unrestricted

를 입력하여 Set-ExcutionPolicy를 Unrestricted로 지정해준다. 그러면 모든 스크립트(서명되지 않은 스크립트 포함)를 실행할 수 있게 되는데 해당 옵션은 마이크로소프트에서 권장하지 않는 옵션이라고한다. 

다음과 같이 진행해야 앞으로 단계에서 에러가 나지 않으므로 나는 일단 풀어주었다.

 

3. vs code를 열고, 상단의 Terminal -> new Terminal 클릭, 혹은 control + shift + ' 를 누른다.

 

4. 다음 코드를 입력한다. 여기서 -g는 globally 하게 깔겠다는 의미다.

npm install -g @vue/cli

 

 

 

그럼 CLI 설치는 끝이다. 매우 간단쓰~!!!!!

설치가 잘됐는지 까지 이왕이면 해보자.

확인 작업은 다음과 같다.

 

 

5. vue -v 를 입력한다.

vue --version

내 버전은 

버전이 확인되면 확실히 다운받아진 것이다.

 

 

---

 

이제 VS CODE에서 실행시켜보겠다.

그 전에 Extensions에서 Vue 3 snippets를 먼저  install 해준다.

Vue.js 코드 작성시 사용의 편의를 도와주는 툴이다.

이제

 

 

1. vs code에서 프로젝트를 새로 생성한다.

 

2. Manually select features 로 화살표를 내린 후 엔터를 친다.

 

3. Router부분을 체크하고(스페이스바를 누르면 체크표시됨) 엔터를 친다.

 

4. 히스토리는 나의 경우는 n으로 체크하고 넘어갔다. 

하고 엔터를 치면 다음과 같이 로딩되고 완료된다.

이렇게 프로젝트가 나온다. 

 

몇가지 파일만 간략하게 설명하자면...

 

vue.js 는 전체 아키텍처를 새롭게 구성할 필요없이 기존의 웹 어플리케이션에 cdm 선언으로 접근한다.

때문에  버전관리가 정말 중요하다. 그렇기 때문에 버전 정보를 기록하여 다른 환경에서도 쓰일 수 있게 해야 한다. main.js 밑에 있는 파일들은 대부분 다른 환경의 호환성을 위해 있는 파일들이다. 

- package-kock.json: 프로젝트에대한 기본정보와 디펜던시 정보 적어놓은 파일로 프로젝트 정보의 최상단에 잇는 애들이라 생각할 수 있다. 

- package.json : npm이라는 오픈소스 패키지 생태계를 사용하기 위한 명세이자, 프로젝트의 의존성 관리를 위한 명세, 또 이 생태계로의 배포를 위한 명세라고 볼 수 있다.( 얀의 경우 yan.lock 과 같다.)

- .gitignore : node_modules의 경우 무시되고 commit 되게 끔 설계한 파일이다.

- Babel.config.js: 최신 브라우저환경이 아닌 환경에서도 원할하게 동작할 수 있게 해주는 파일이다. ES6+ 버전이상의 JavaScript, JSX, TypeScript 코드를 하위버전의 JacaScript 문법으로 변환시켜주는 역할을 해준다.

 

 

 

5.  cd ./프로젝트명 을 입력한 후 npm run serve를 입력하면 

npm run serve

 

 

control 키를 누른 상태로 클릭하면 브라우저를 확인할 수 있다.

 

 

이런 식으로 나오면 정상적으로 Vue 프로젝트를 생성하고, 동작시킨 것이다.

 

 

---

 

 

D.O.N.E!!!