Vue 설치 및 프로젝트 설정

목차

1. 뷰 설치 되어 있는 지 확인하는 방법

vue —version

2. Vue 설치 하는 방법

윈도우:
npm install -g vue

맥북:
sudo npm install -g vue 

3. Vue/Cli 설치 하는 방법

윈도우:
npm install -g @vue/cli
맥북:
sudo npm install -g @vue/cli

@vue/cli와 비슷한 것으로, vite가 있다.

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 방법)

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이다.