[vue 개발] vue3.js 프로젝트 만들기
1. Vue.js 소개
Vue.js는 반응형 웹페이지를 제작하기 위한 JavaScript 프레임워크입니다.
React.js와 Vue.js 중 어느 것을 선택할지 고민하다가, Vue.js의 난이도가 더 낮다는 평가에 따라 Vue.js로 개발을 진행하게 되었습니다.
해당 블로그를 제작하기 위해 React.js와 Next.js도 공부했으나, Vue.js가 더 직관적이고 쉽게 느껴졌습니다.
Vue.js는 초기 학습 곡선이 낮고, 직관적인 API를 제공하여 프로젝트를 쉽고 빠르게 시작할 수 있습니다.
이클립스 기반 언어를 주로 사용하던 저에게, VS Code와 npm을 통해 손쉽게 패키지를 설치가 가능한 부분이 너무 좋았습니다.
이제 설치부터 프로젝트 생성까지의 과정을 설명드리겠습니다.
2. Node.js 설치
npm 명령어와 라이브러리를 사용하려면 Node.js가 필요합니다.
Node.js는 JavaScript 런타임 환경으로, Vue.js 프로젝트를 설정하고 실행하는 데 필수적입니다.
1) 설치자료 : vscode, node.js (backend 게시판 참조)
설치가 완료되면, 터미널에서 다음 명령어를 실행하여 설치가 제대로 되었는지 확인합니다:
> node -v
> npm -v
2) vue 설치
> vscode를 설치 후 터미널을 열어서 npm install vue
3. @vue/cli 설치
Vue CLI는 Vue.js 프로젝트 구조를 생성하고 필요한 의존성을 관리할 수 있도록 도와줍니다. Vue CLI를 설치하려면 터미널에서 다음 명령어를 실행합니다:
vscode를 설치 후 터미널을 열어서
> npm install -g @vue/cli
이 명령어는 Vue CLI를 전역적으로 설치합니다.
설치가 완료되면, 터미널에서 다음 명령어를 실행하여 Vue CLI가 설치되었는지 확인할 수 있습니다
> vue --version
4. vue 프로젝트 생성
Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성할 수 있습니다.
터미널에서 다음 명령어를 실행합니다:
> vue create 프로젝트명(frontend))
frontend는 프로젝트 이름으로, 원하는 이름으로 변경할 수 있습니다.
명령어를 실행하면 Vue CLI는 프로젝트 설정을 위한 몇 가지 옵션을 묻습니다.
Vue 3.x를 선택하고 기본 설정을 사용하여 프로젝트를 생성합니다.
아래와 같이 프로젝트가 생성됨
위 생성된 프로젝트로 이동 > cd frontend
생성된 Vue 프로젝트의 기본 구조는 다음과 같습니다:
node_modules/: 프로젝트에서 사용하는 모든 npm 패키지가 저장됩니다.
public/: 정적 파일을 저장하는 폴더로, index.html 파일이 포함되어 있습니다. 이 파일은 빌드 프로세스에서 수정되지 않고 그대로 배포됩니다.
src/: 애플리케이션의 소스 코드가 포함된 폴더입니다. 여기에서 대부분의 작업이 이루어집니다.
- assets/: 이미지, 폰트 등의 정적 자원이 포함됩니다.
- components/: Vue 컴포넌트 파일들이 포함됩니다.
- App.vue: 애플리케이션의 루트 컴포넌트입니다.
- main.js: 애플리케이션의 진입 파일입니다.
.gitignore: Git에서 추적하지 않을 파일 및 디렉토리를 지정합니다.
babel.config.js: Babel 설정 파일입니다.
package.json: 프로젝트의 메타데이터와 의존성을 관리합니다.
README.md: 프로젝트에 대한 설명이 포함된 파일입니다.
5) 실행
실행명령어> npm run serve
프로젝트를 생성하고 나면, 위 명령어를 실행하여 프로젝트를 실행할 수 있습니다:
명령어를 실행하면 개발 서버가 시작되고, 브라우저에서 http://localhost:8080에서 애플리케이션을 확인할 수 있습니다.
기본 화면에는 "Welcome to Your Vue.js App" 메시지가 표시됩니다.
이제 Vue.js 프로젝트가 성공적으로 생성되고 실행되었습니다.
다음 단계로, 컴포넌트를 추가하고 커스터마이징하여 나만의 웹 애플리케이션을 만들어 보세요.
Vue.js를 사용하여 멋진 웹 개발을 경험해 보시기 바랍니다!
질문이 있거나 도움이 필요하시면 언제든지 댓글을 남겨주세요.
읽어주셔서 감사합니다! 😊