[vue] 프로젝트 시작하기

2021-07-05

vue3 가 안정정? 이어서 그대로 쓰도록 하겠다.

@vue/cli 가 정상적으로 설치되었으면, 실행시 템플릿을 선택하여 생성가능

 

# 템플릿 이용

vue create vue-project

Default (Vue3)([Vue3 ] babel, eslint )  <<-  선택!

- router 추가

vue add router

 

# 메뉴얼로 생성

vue create vue-project-manually

Manually select features <<- 선택

 

-- 아래 5가지 선택

Choose Vue version  

Babel

Router

Vues

Linter / Formatter

 

-- vue 3.x 선택

-- Use history mode for router? ---> Y

-- ESLint + Standard config

-- Lint on save

-- In package.json

 

-- 템플릿 재사용을 위해 

Save this as a preset for future project ? yes 를 하고

이름을 지정함 ex) vue basic

 

## vue ui 로 ui 인터페이스로 생성도 가능!!

 

 

# 플러그인 추가!

- 크롬 플러그인

https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

Vue.js devtools

vue3 용 플러그인으로 꼭! 설치

 

- vscode 플러그인

Vetur

Debugger for Chrome

Prettier - Code formatter

 

 

2021-06-14

환경: Windows10 Home 20H2

node 14.16.1

 

vue가 2020년 에 vue3 가 릴리즈되었다.

그리고 vue-cli 도 버전에 따라 차이가 좀 있었다.

 

최종적으로 아직은 안정적이지 않은 vue3 대신 vue2를 쓰고,

vue-cli 는 4 버전을 써서 생성을 하는걸로 다시 수정한다.

vue-cli 도 이름이 @vue/cli 로 바뀌었다.

 

# 기존버전 설치했으면 삭제

npm uninstall -g vue-cli

 

# 신규 vue-cli 설치 -> 4.5.13 설치함!

npm i -g @vue/cli

 

# @vue/cli 에서 생성하기

vue create to-do --default  -> 명령어가 create 로 바뀜!

 

# 테스트 서버 띄우기

npm run serve -> dev 에서 serve 로 바뀜!

 

# 설정관련 참고

 BASE_URL 등의 환경변수 설정하기

https://velog.io/@skyepodium/vue-%EC%8B%A4%ED%96%89-%EB%AA%A8%EB%93%9C%EC%99%80-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95

vue 실행 모드와 환경 변수 설정

 

-----------------------------------------------------------------------------------------------

 

환경: Windows10 Home 20H2

node 14.15.1

 

# vue-cli 설치

npm i vue-cli -g

 

# vue-cli 로 프로젝트 생성

vue init webpack-simple

 

# 모듈 다운로드

npm i

 

# 실행하기

npm run dev

 

# 빌드

npm run build

 

vue 시작하기

https://kr.vuejs.org/v2/guide/index.html

시작하기 — Vue.js

 

vuex (상태관리)

https://vuex.vuejs.org/kr/

Vuex가 무엇인가요? | Vuex