프레임워크/Vue
[Vue] 초기 세팅 및 익스텐션 설정
은돌1113
2024. 4. 23. 10:25
1️⃣ 초기 세팅
- Node.js 최신 버전 설치
- VSCode 에디터 설치
- 폴더 생성 후 에디터에 있는 터미널 오픈 (Terminal - New Terminal)
- 터미널에 아래와 같이 입력
(🥲 글쓴이는 vue create 프로젝트 이름에서 자꾸 yarn is not defined이 떠서 yarn install을 진행하였습니다.
웬만한 오류는 Node.js 버전 문제이고 # is not defined는 그 라이브러리를 다시 install 해주면 되는 것 같습니다. 이외의 다른 오류는 구글링)
$ npm install -g @vue/cli // vue 사용을 쉽게 해주는 라이브러리
$ vue create 프로젝트 이름 // 이때 선택지가 나오는 데 vue 3를 선택하시면 됩니다.
- 프로젝트 설치 완료
: 프로젝트가 무사히 설치되면 아래 사진과 같은 화면이 나옵니다.
실행할 때는 터미널에 아래 명령어를 입력해 주고, localhost:8080에서 테스트해 볼 수 있습니다.- npm인 경우
npm run serve
- yarn인 경우
yarn serve
- npm인 경우
2️⃣ 익스텐션
- Vuter
- Vue 3 Snippets
- Vue VSCode Snippets
- HTML CSS Support
- ESLint