Node.js
-자바스크립트 런타임이며 다양한 모듈을 설치해 개발함
백엔드 외에서도 node.js 명령어의 도움을 받으며 개발할 수 있음.
Vue 프로젝트
1. Vue 프로젝트 생성 -> Vue CLI명령어로 프로젝트 생성
> vue create vue-test
2. 프로젝트 실행
-> 프로젝트 폴더에서 npm 명령으로 실행
-> 프로젝트 자체에서 개발용 경량 서버 제공
(Vue 프로젝트 내에서 자체 경량 서버를 제공함)
-> Hot Deploy 제공
*Hot Deploy : 한번 실행시킨 이후에는 개발 코드를 수정하고 저장하면 바로 반영되는 것
>cd vue-test
>npm run serve
3. 프로젝트 빌드(build)
-> 개발 완료 후 배포 파일로 빌드
-> dist 폴더에 배포 파일 생성
> npm run build
1. Vue 프로젝트 구조
public 폴더 : 클라이언트에게 서비스하기 위한 파일이지만, Vue의 관리를 받을 필요가 없는 파일을 담기 위한 위치
(static 한 HTML, CSS, 아이콘 이미지 등을 담기 위한 폴더)
브라우저는 HTML로딩부터 시작. 그래서 HTML이 있어야 브라우저에서 뭔가를 띄울 수 있음.
public -> Iindex.html은 사실상 entry point.
HTML에 의해서 실행되는게 main.js
자바스크립트적으로 entry point 는 main.js
main.js에서 APP.vue를 화면에 띄움. -> 그래서 APP.vue에 의해서 화면이 나오는데 APP.vue에서 다시 HelloWorld.vue를 화면에 뿌림.
그래서 HTML에서부터 시작해서 HTML에 main.js를 실행시키고 main.js에서 APP.vue를 화면에 띄운거고, APP.vue에서 다시 HelloWorld.vue를 화면에 띄우는 구조로해서 첫 화면이 나옴.
2. index.html
-브라우저에서 실행되는 app의 entry point
-<div id="app"></div> 위치에 Vue에 의한 결과 출력
<!DOCTYPE html>
<html lang="en">
................
<body>
.............
<div id="app"></div>
</body>
</html>
3. main.js
-HTML에 의해 로딩되어 실행되는 자바스크립트 entry point
import { createApp} from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
4. App.vue
-Vue의 Component를 구성하기 위한 파일
-확장자를 .vue로 작성
<template>
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template><script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
</style>Vue 파일 내에는 3가지 구성요소가 있음
- template 구성요소
- script 구성요소
- style 구성요소
실습
1. Node.js 설치
Node.js — 어디서든 JavaScript를 실행하세요
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
위 링크에서 node.js 다운로드 받기
2. 명령 프롬프트 창에서 Vue CLI명령어 설치
>npm install -g @vue/cli
3. vue 명으로 프로젝트 생성
>vue create vue-test
4. 버전 선택
나는 Vue 3으로 했음
5. 프로젝트 실행
>cd vue-test위 명령어로 일단 만들어진 폴더 안으로 들어가고
>npm run serve만들어진 프로젝트를 내장된 경량 서버에서 돌려보기
빌드 완료.
서버가 구동되어있는 상태.
테스트용 서버가 정상적으로 구동돼있고, 프로젝트가 그 서버에서 동작할 준비가 완료된 상태.
6. 브라우저로 테스트
이렇게 나오면 개발환경 구축 성공
'웹 프로그래밍 > Vue.js' 카테고리의 다른 글
| ES2015 - Class와 생성자 (0) | 2024.12.23 |
|---|---|
| ES2015 기본 문법 (0) | 2024.12.13 |
| ES2015 (1) | 2024.12.11 |
| 웹 애플리케이션과 Vue.js (4) | 2024.12.10 |