안녕하세요, 오늘은 베스핀글로벌 D&A실 김지혜님이 작성해 주신 ‘Node.js + Vue3 + Vuetify 설치’에 대해 알아보겠습니다.
궁금하신 부분이 있으시면 댓글을 달아주세요 🙂
1. Node.js 설치
1-1. 설치
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/07/1-227.png?resize=695%2C139&ssl=1)
1-2. TEST
test.js vi 작성 → sudo node httpd.js 실행 → 정상실행 되면 Hello World 브라우저 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/07/1-228.png?resize=967%2C278&ssl=1)
2. Vue 설치
2-1. Vue 설치
Vue cli 최신 버전 글로벌로 설치한다.
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/07/1-229.png?resize=645%2C123&ssl=1)
2-2. 프로젝트 생성
Vue cli 최신 버전 글로벌로 설치한다.
- 프로젝트 생성 → 버전 선택 → 설치 → 프로젝트 생성 완료
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/10/3-1.png?resize=437%2C660&ssl=1)
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/10/3-2.png?resize=657%2C696&ssl=1)
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/10/3-3.png?resize=725%2C777&ssl=1)
구성 확인
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/07/1-231.png?resize=551%2C246&ssl=1)
2-3. Vuetify 패키지 추가
생성한 프로젝트로 이동 후 패키지 설치
Vue3를 설치했으므로 동일한 버전을 선택
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/07/1-232.png?resize=834%2C251&ssl=1)
3. TEST
![](https://i0.wp.com/bespin-wordpress-bucket.s3.ap-northeast-2.amazonaws.com/wp-content/uploads/2023/07/1-233.png?resize=773%2C355&ssl=1)
감사합니다 🙂