Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- Docker
- Python
- vuejs
- 생성형
- fastapi
- 솔루션조사
- k8s
- jpa
- SpringBoot
- 리트코드
- POD
- vue.js
- LLaMa
- Redis
- BFS
- 머신러닝
- kubernetes
- 쿠버네티스
- Machine Learning
- 컨설팅
- 로깅
- LeetCode
- 생성형 AI
- 컨설턴트
- 도커
- 오픈시프트
- OpenShift
- 메세지큐
- GPT
- fast api
Archives
- Today
- Total
수 많은 우문은 현답을 만든다
VueJS로 최초 환경구성 하기 본문
어떤 웹 서비스든지 화면이 존재하며 우리는 그것을 Front-end라고 부릅니다. 오늘은 Front-end 프레임워크 중 하나인 Vue.js로 화면을 구성하는 방법을 알아보고자 합니다.
- Vue란?
JavaScript 프레임워크로 이번 포스팅에서는 Vue 3를 다루겠습니다. Vue 컴포넌트는 옵션(Options) API와 컴포지션(Composition) API 두 가지 스타일로 작성할 수 있는데 옵션 스타일은 익숙하므로 Vue 3부터 나타난 컴포지션 방식으로 작성해보도록 하겠습니다. - Node.js 설치
https://nodejs.org/en/download/
설치 후 커맨드창을 열고 npm -v 로 설치를 확인합니다. - Vue 설치
npm init vue@latest - 플러그인 설치
저는 위에서 ESLint, Prettier, Router는 활성화(Yes) 했습니다. - 프로젝트 생성 및 실행
cd <your-project-name>
npm install
npm run dev
이제 위 http://localhost:5173/ 로 접속하면 아래와 같은 기본 화면이 나옵니다.
- 프로젝트 구조
프로젝트가 어떻게 생겼는지 구조를 한번 살펴보겠습니다.
기초 공사가 완료되었습니다. 이제 우리는 아래 파일들을 수정 및 확장하여 웹 서비스 개발을 해보도록 하겠습니다.
화면 뼈대 : views
화면 구성 : components
화면 요청 처리 : router
기본 구성 : App.vue, main.js
감사합니다.
'토이 프로젝트 > VueJs' 카테고리의 다른 글
Vue 웹 애플리케이션 동작 원리 (1) | 2024.01.30 |
---|