[Vue.js] 03 Vue 프로젝트를 생성해보자!

 Vue 프로젝트를 생성해보자.

 우선 명령 프롬프트에서 생성을 해본 뒤 Visual Studio Code에서 생성을 해보려고 한다. 이 때 Visual Studio Code에서 코딩시 들여쓰기 규칙이 맞지 않으면 에러가 발생하니 주의하자.

 

1. 명령 프롬프트에서 생성해보기

   1) project01 프로젝트 생성 (기본옵션으로만 구성)
      \나만의경로\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 프로젝트 구조

     ┌─node_modules                  프로젝트에서 쓰는 모든 라이브러리 관리
     ├─public
     │  ├─favicon.icon
     │  └─index.html                 페이지 하나로 서비스가 구동되며, 자바스크립트가 페이지를 동적으로 구성한다
     ├─src
     │  ├─assets                         
     │  ├─components                         
     │  ├─App.vue                    메인 페이지. HTML로 컴파일해서 index.html 변환 동작된다             
     │  └─main.js              npm run serve실행 후 최초로 실행되는 파일. App.vue의 코드를 index.html로 실행시켜주는 역할 
     ├─babel.config.js
     ├─jsconfig.json
     ├─package.json                  project01 프로젝트의 모든 정보(라이브러리 버전, 프로젝트 설정기록등)
     ├─package-lock.json
     ├─README.md
     └─vue.config.js



  3) project01 프로젝트 실행
     \나만의경로\workspace_vue\project01>npm run serve

     App running at:
     - Local:    http://localhost:8081/
     - Network:  http://고정IP:8081/

 

테스트 페이지를 알아서 만들어준다

  4) project01 프로젝트 중지 : Ctrl + C

 

 

2. 비쥬얼 스튜디오에서 프로젝트 건드려보기

 1) project02 프로젝트 생성 (기본옵션으로만 구성)
      \나만의경로\vue create project02

 

-------------------------------------------------/src/App.vue
<template>
  <p>안녕하세요</p>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

** HelloWorld.vue와 관련한건 깔끔하게 지우고 테스트 한다
-------------------------------------------------/src/App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

** 데이터바인딩이란?
-------------------------------------------------/src/App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- 1) 데이터 바인딩 -->
  <div>
    {{ logo }}
    <h4 class="red" :style="style1">OO원룸</h4>
    <p>{{ price1 }}만원</p>
  </div>
  <div>
    <h4>OO원룸</h4>
    <p>{{ price2 }}만원</p>
  </div>
  <hr>
</template>

<script>
//기존 JavaScript와 jQuery에서의  데이터 바인딩
//document.getElementById("아이디명").innerHTML=??
//$("아이디명").html(??)
export default {
  name: 'App',
  components: {
  },
  data(){//데이터 보관통(변수등)
    return {
      price1 : 60,
      price2 : 70,
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

 

 

3) 배열
-------------------------------------------------/src/App.vue
<template>
  <!-- 2) 데이터 바인딩(배열) -->
  <div>
    <h4>{{ products[0] }}</h4>
    <p>10 만원</p>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>20 만원</p>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>30 만원</p>
  </div>
  <hr>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data(){//데이터 보관통(변수등)
    return {
      price1 : 60,
      price2 : 70,
      logo : '원룸샵',
      style1 : 'color : blue',
      products : ['역삼동원룸','천호동원룸','서초동원룸']
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>