반응형
✔️Vue App 개발 환경 구축
1. Node.js 설치
※ 설치참조 https://offbyone.tistory.com/441
- Javascript로 작성된 프로그램을 운영체제상에서 일반 애플리케이션 프로그램처럼 실행시켜주는 런타임입니다.
- 서버 프로그램을 작성하는데 많이 사용된다
- 설치 사이트 https://nodejs.org/ko/
- node-v18.12.1-x64.msi 다운후 설치
- npm (Node Package Manager)
- 웹개발에 필요한 모듈들을 npm명령어를 통해 쉽게 다운 및 설치할 수 있으며, node.js를 설치하면 같이 설치된다
- 각종 웹개발 라이브러리 설치 도우미
- node와 npm 설치 버전 확인 (명령프롬프트에서 확인)
- node -v
- npm -v
2. Vue 와 Vue CLI (Command Line Interface) 설치 - 명령프롬프트에서 실습
※ 설치참조 https://learn.microsoft.com/ko-kr/windows/dev-environment/javascript/vue-on-windows
※ 설치폴더 생성 c:\나만의경로\vue
1. Vue 설치
c:\나만의경로\vue>npm install vue
2. Vue CLI (Command Line Interface) 설치
- Vue 프로젝트를 빠르게 개발하고, 빌드하고, 서비스를 런칭할 수 있도록 해주는 툴
- 프로젝트 구조를 자동으로 세팅해 줌
- -g 전역적으로 설치
※ 설치 오류 : 대체품 (npm 대용) yarn 1.XX 검색
c:\나만의경로\vue>npm install -g @vue/cli
3. Vue 버전 확인
c:\나만의경로\vue>vue --version
4. Vue 버전 업데이트
c:\나만의경로\vue>npm update -g @vue/cli
※ Vue 확장 팩 설치 - Visual Studio Code에서 ① Vetur, ② html css support, ③ vue 3 snippets 검색후 설치
✔️Vue 프로젝트 생성
※ 참조 유튜브 : 개발자의품격 https://www.youtube.com/watch?v=b0ImUEsqaAA
※ 작업폴더 생성 c:\나만의경로\workspace_vue
※ 주의 : Visual Studio Code에서 코딩시 들여쓰기 규칙이 맞지 않으면 에러 발생
1. project01 프로젝트 생성 (기본옵션으로만 구성)
명령프롬프트 사용
c:\\나만의경로\\workspace_vue>vue create project01
방향키로 선택
? Please pick a preset: (Use arrow keys)
Default ([Vue 3] babel, eslint) <----- 선택
Default ([Vue 2] babel, eslint)
Manually select features
2. project01 프로젝트 구조
3. project01 프로젝트 실행
c:\\나만의경로\\workspace_vue\\project01>npm run serve
App running at:
- Local: http://localhost:8080/
- Network: http://고정IP:8080/
4. project01 프로젝트 중지 키
Ctrl + C
✔️Vue 프로젝트 맛보기
※ 참조 유튜브 : 코딩애플 https://www.youtube.com/watch?v=tVaahsXpwk&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=1
- 나만의 경로에 project02 생성
- project02>src>App.vue 파일에서 작업
1. 데이터, 스타일 바인딩
<template>
<div>
<h3>1) 데이터, 스타일 바인딩</h3>
<h4>{{ title }}</h4>
<div>
<span :style="style1">딸기</span>: {{ price1 }}만원 <!-- :style -> 문법(콜론, 띄어쓰기) 주의 -->
</div>
<br>
<div>
<span :style="style2">멜론</span>: {{ price2 }}만원
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() { //바인딩할 데이터 보관(변수 등)
return {
title: '과일종류: 가격',
style1: 'color: red', //스타일속성
style2: 'color: green', //스타일속성
price1: 2,
price2: 3,
}
},
}
</script>
2. 데이터 바인딩(배열)
<template>
<div>
<h3>2) 데이터 바인딩(배열)</h3>
<div>
<h4>{{ products[0] }}</h4>
<p>70 만원</p>
</div>
<div>
<h4>{{ products[1] }}</h4>
<p>80 만원</p>
</div>
<div>
<h4>{{ products[2] }}</h4>
<p>90 만원</p>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() { //바인딩할 데이터 보관(변수 등)
return {
products: ['신사동 원룸', '논현동 원룸', '강남동 원룸'], //배열
}
},
}
</script>
3. 반복문 + 스타일 추가
<template>
<div>
<h3>3) 반복문</h3>
<div class="menu" v-for="m in 3" :key="m"> <!-- key값을 꼭 넣어줘야함 -->
<a>Home</a>
<a>Products</a>
<a>About</a>
<hr>
</div>
<br>
<div class="menu">
<a v-for="m in 3" :key="m">Home{{ m }}</a> <!-- m: 현재 인덱스 -->
</div>
<br>
<div class="menu">
<a v-for="menu in menus" :key="menu">{{ menu }}</a> <!-- m: 현재 회전 인덱스 -->
</div>
<br>
<div class="menu">
<a v-for="(menu1, i) in menus" :key="i">{{ menu1 }}{{ i }}</a>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() { //바인딩할 데이터 보관(변수 등)
return {
menus: ['HOME', 'SHOP', 'ABOUT'],
}
},
}
</script>
<style>
.menu{
background: rgb(139, 61, 84);
padding: 15px;
border-radius: 5px;
}
.menu a {
color: antiquewhite;
padding: 10px;
}
</style>
4. 이벤트 핸들러
<template>
<div>
<h3>4) 이벤트 핸들러</h3>
<div>
<h4>{{ kindOfEvent[0] }}</h4>
<p>
<!-- <button v-on:click="">이벤트:클릭</button> 형식으로도 사용가능 -->
<button @click="counts[0]++">이벤트:클릭</button>
<span> 클릭 횟수: {{ counts[0] }}</span>
</p>
</div>
<br>
<div>
<h4>{{ kindOfEvent[1] }}</h4>
<p>
<button @mouseover="counts[1]++">이벤트:마우스오버</button>
<span> 마우스오버 횟수: {{ counts[1] }}</span>
</p>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() { //바인딩할 데이터 보관(변수 등)
return {
kindOfEvent: ['click event', 'mouseover event', 'click event and function'],
counts: [0, 0, 0],
}
},
}
</script>
5. 이벤트와 함수
<template>
<div>
<h3>5) 이벤트와 함수</h3>
<h4>{{ kindOfEvent[2] }}</h4>
<p>
<button @click="increase()">이벤트+함수호출</button>
<span> 클릭 + 함수호출 횟수: {{ counts[2] }}</span>
</p>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() { //바인딩할 데이터 보관(변수 등)
return {
kindOfEvent: ['click event', 'mouseover event', 'click event and function'],
counts: [0, 0, 0],
}
},
methods: {
increase() {
this.counts[2]++ //변수 가져올 때 this 붙여줘야함
}
},
}
</script>
6. 모달창 만들기(조건문)
<template>
<div>
<h3>6) 모달창 만들기(조건문)</h3>
<div>
<h4 @click="modalWin=true">모달창 open</h4>
</div>
<div class="black-bg" v-if="modalWin==true">
<div class="white-bg">
<h4>상세페이지</h4>
<p>상세페이지 내용</p>
<button @click="modalWin=false">닫기</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() { //바인딩할 데이터 보관(변수 등)
return {
modalWin: false,
}
},
}
</script>
<style>
.black-bg {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
background: #e0e0e0;
}
.white-bg {
width: 80%;
background: white;
border-radius: 8px;
padding: 20px;
}
</style>
7. import/export
project02>src>assets>jsfile.js 생성
//jsfile.js
var apple = 10
var apple1 = 100
export {apple, apple1}
project02>src>App.vue 파일에서 작업
<template>
<div>
<h3>7) import/export</h3>
<div>
apple: {{ a }}<br>
apple1: {{ b }}
</div>
</div>
</template>
<script>
// import 변수명 from 파일경로
// 주의사항 : export 해놓은 변수를 사용하지 않으면 에러발생
import {apple, apple1} from './assets/jsfile.js'
export default {
name: 'App',
components: {},
data() { //바인딩할 데이터 보관(변수 등)
return {
a: apple,
b: apple1,
}
},
}
</script>반응형
'Front-End > JavaScript' 카테고리의 다른 글
| Vue.js (2) (0) | 2023.05.26 |
|---|---|
| jQuery 실습 - 아날로그 시계 만들기 (0) | 2023.03.31 |
| AJAX(1) (0) | 2023.03.31 |
댓글