안녕하세요. 혀코입니다.
이번 시간에는 Vue + Vite 프로젝트 시작하는 방법에 대해서 알아보겠습니다.
아래 명령어를 실행해서 Vue + Vite 프로젝트를 시작합니다.
$ npm create vite@latest
그러면 프로젝트 명을 물어봅니다. 프로젝트 명을 vue-awesome 으로 합니다.
? project name: >> vue-awesome
다음으로 사용할 자바스크립트 라이브러리 또는 프레임워크를 고릅니다. Vue를 고릅니다.
vanilla
> vue
react
preact
lit
svelte
Vite를 사용해서 Vue 뿐만 아니라 vanilla, react, preact, lit 또는 svelte 를 사용할 수도 있습니다.
그리고 vue 종류를 vue 또는 vue-ts 중에 vue로 선택합니다.
> vue
vue-ts
그리고 vue-awesome 폴더로 들어가서 Dependency 인스톨 후 서버를 시작합니다.
cd vue-awesome
npm install
npm run dev
그러면, 다음과 같이 출력되면서 http://127.0.0.1:5173/ 에서 Vue + Vite 프로젝트 시작화면을 확인할 수 있습니다.
Vue + Vite 프로젝트 시작 코드는 다음과 같습니다.
src 폴더안에 assets 폴더에 이미지 파일이 있고, components 폴더에 Vue UI component 가 있고 메인이 되는 App.vue 파일은 src 폴더에 위치해 있습니다. src 폴더의 main.js 파일에서 App.vue 파일을 실행해주는 형식으로 구성되어 있습니다.
이렇게 Vue 프로젝트 시작하는 방법에 대해서 알아봤습니다.
해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글