Vue 설치 및 프로젝트 설정

May 29, 2024

Contents

목차 1. 뷰 설치 되어 있는 지 확인하는 방법 2. Vue 설치 하는 방법 3. Vue/Cli 설치 하는 방법 3.2. Vue Project 만드는 방법 → CDN 방법(하지 말자)3.3. Vue 프로젝트 만드는 방법 → NPM 방법( O)3.4. Vue 프로젝트 만드는 방법 → Vue CLI 방법( 더 이상 권고 X)4. 확장 프로그램 5.1 프로젝트 만들어 보기(npm 방법)5. Vue 프로젝트 설치하기(Vue Cli 방법)Vue 시작하기

목차 1. 뷰 설치 되어 있는 지 확인하는 방법 2. Vue 설치 하는 방법 3. Vue/Cli 설치 하는 방법 3.2. Vue Project 만드는 방법 → CDN 방법(하지 말자)3.3. Vue 프로젝트 만드는 방법 → NPM 방법( O)3.4. Vue 프로젝트 만드는 방법 → Vue CLI 방법( 더 이상 권고 X)4. 확장 프로그램 Volar, Vue VSCode Snippets 설치 1. Volar 2. Vue VSCode Snippets 5.1 프로젝트 만들어 보기(npm 방법)5. Vue 프로젝트 설치하기(Vue Cli 방법)Vue 시작하기


npm init vue@latest
Project Name : .  // .를 찍으면 기존 폴더에 프로젝트를 만들겠다는 의미 
Package Name : 현재 폴더 이름 // 기본적으로 현재 폴더 이름을 그대로 하는 관습이 있음
Typescript:  No
JSX: React에서 사용하는 문법이므로, 
Vue Router Single Page Application 
Pinia
Unit Testing  
End-toEnd Testing Solution
ESLint :  

npm install

5. Vue 프로젝트 설치하기(Vue Cli 방법)


vue create 폴더명
vue create . //(현재 폴더에 설치하라는 의미임)

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

여기서, 설정을 하면 됨 
-> 기본 옵션은 Default Vue 3임
-> Manually를 누르고, 원하는 옵션 선택해주면 된다.
Vuex, Router는 설치하는 것이 편함

Vue 시작하기


extensions.json //추천 extension 정보를 보여주게 된다.

{
  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

node_modules // npm install 명령어를 했을 때, 자동으로 생성되는 폴더

public 폴더 // 정적인 resource들이 저장되는 곳

src 폴더 -> assets/components 등이 존재하며, 핵심적인 source code이다.

App.vue 파일은, Root component가 되는 파일, Vue로 끝나는 파일을 SFC(Single File Component)

main.js는 필요한 설정들을 초기화 하는 파일들

.gitignore에 node_modules가 자동으로 있으므로, 굳이 버전관리 까지 하면서 버전관리 할 필요가 없어서

index.html

Depth 1	Depth 2	설명
.vscode		Visual Studio Code의 프로젝트 설정과 관련된 파일들을 포함하는 폴더입니다.
public		정적인 리소스(번들링이 필요 없는 파일)들이 저장되는 폴더입니다.
src		뷰 애플리케이션에서 사용되는 소스 코드를 저장하는 폴더입니다.
-	assets	뷰 애플리케이션에서 사용되는 이미지, CSS, 폰트와 같은 자원들을 저장하는 폴더입니다.
-	components	뷰 애플리케이션에서 사용될 컴포넌트(=확장자가 .vue로 끝나는 파일)를 저장하는 폴더입니다.
-	App.vue	뷰 애플리케이션에서 루트 컴포넌트로 사용되는 파일입니다.
-	main.js	뷰 애플리케이션에서의 진입점으로 애플리케이션 인스턴스를 생성하고 필요한 설정들을 초기화하는 파일입니다.
.gitignore		버전 관리 도구인 Git에서 제외할 폴더나 파일들을 설정하는 파일입니다.
index.html		뷰 애플리케이션의 진입점이 되는 HTML 파일입니다.
package.json		npm을 사용해서 설치되는 패키지들의 정보 및 의존성 등을 관리하는 파일이라고 생각하면 됩니다.
readme.md		뷰 애플리케이션의 기본적인 매뉴얼이 작성되어 있는 마크다운 형식의 파일입니다.
vite.config.js		vite와 관련된 설정을 하는 파일입니다.

Vue

Vue 설치 및 프로젝트 설정

tofu

May 29, 2024

Contents


npm init vue@latest
Project Name : .  // .를 찍으면 기존 폴더에 프로젝트를 만들겠다는 의미 
Package Name : 현재 폴더 이름 // 기본적으로 현재 폴더 이름을 그대로 하는 관습이 있음
Typescript:  No
JSX: React에서 사용하는 문법이므로, 
Vue Router Single Page Application 
Pinia
Unit Testing  
End-toEnd Testing Solution
ESLint :  

npm install

5. Vue 프로젝트 설치하기(Vue Cli 방법)


vue create 폴더명
vue create . //(현재 폴더에 설치하라는 의미임)

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

여기서, 설정을 하면 됨 
-> 기본 옵션은 Default Vue 3임
-> Manually를 누르고, 원하는 옵션 선택해주면 된다.
Vuex, Router는 설치하는 것이 편함

Vue 시작하기


extensions.json //추천 extension 정보를 보여주게 된다.

{
  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

node_modules // npm install 명령어를 했을 때, 자동으로 생성되는 폴더

public 폴더 // 정적인 resource들이 저장되는 곳

src 폴더 -> assets/components 등이 존재하며, 핵심적인 source code이다.

App.vue 파일은, Root component가 되는 파일, Vue로 끝나는 파일을 SFC(Single File Component)

main.js는 필요한 설정들을 초기화 하는 파일들

.gitignore에 node_modules가 자동으로 있으므로, 굳이 버전관리 까지 하면서 버전관리 할 필요가 없어서

index.html

Depth 1	Depth 2	설명
.vscode		Visual Studio Code의 프로젝트 설정과 관련된 파일들을 포함하는 폴더입니다.
public		정적인 리소스(번들링이 필요 없는 파일)들이 저장되는 폴더입니다.
src		뷰 애플리케이션에서 사용되는 소스 코드를 저장하는 폴더입니다.
-	assets	뷰 애플리케이션에서 사용되는 이미지, CSS, 폰트와 같은 자원들을 저장하는 폴더입니다.
-	components	뷰 애플리케이션에서 사용될 컴포넌트(=확장자가 .vue로 끝나는 파일)를 저장하는 폴더입니다.
-	App.vue	뷰 애플리케이션에서 루트 컴포넌트로 사용되는 파일입니다.
-	main.js	뷰 애플리케이션에서의 진입점으로 애플리케이션 인스턴스를 생성하고 필요한 설정들을 초기화하는 파일입니다.
.gitignore		버전 관리 도구인 Git에서 제외할 폴더나 파일들을 설정하는 파일입니다.
index.html		뷰 애플리케이션의 진입점이 되는 HTML 파일입니다.
package.json		npm을 사용해서 설치되는 패키지들의 정보 및 의존성 등을 관리하는 파일이라고 생각하면 됩니다.
readme.md		뷰 애플리케이션의 기본적인 매뉴얼이 작성되어 있는 마크다운 형식의 파일입니다.
vite.config.js		vite와 관련된 설정을 하는 파일입니다.