[Vue] Intellj에서 Vue.js 프로젝트 생성하기 -1

저도 Vue는 처음이지만  공부를 하면서 제가 느꼈던 것에대 하여 이렇게 블로그에 남기게 되었습니다. 처음 Vue라는 것에 큰 벽을 느겼지만 하나씩 하나씩 해나가면서 아주 조금은 이해 할 수 있었습니다. 

 

Vue.js 란?

Vue 사용자에게 즉각적으로 보여지는 웹페이지를 개발하기 위한 프론트엔드 프레임워크의 한 종류로 보시면됩니다.  간단 하게 네이버, 구글 모든 웹브라우저에서 보여지는 화면을 좀더 쉽게 그리기 위한 하나의 도구(프레임워크)라고 이해 하셔됩니다.

 

 

Vue 장점

 

1. Vue는 컴포넌트를 사용한다는 것 입니다.

컴포넌트(Componet)는 간단하게 말하자면 하나의 부품이라고 보시면 됩니다. 여러 부품을 가지고 하나의 기계를 만드는 것처럼 컴포넌트 또한 여러 컴포넌트를 가지고 하나의 페이지를 구성할 수 있습니다. 

2. 형식을 갖는다. 

컴포넌트는 또한 어느 형식을 가지고 있기 때문에 다른 사용자가 보더라도 직관적으로 빠르게 이해하여 바로 사용할 수 있다는 것도 큰 장점을 작용되고 있습니다.

3. 데이터 바인딩으로 인한 화면 변환

화면에 뿌려는 뷰와 데이터가 바인딩이 되어있어서 보여지는 화면에 변경이되면 데이터가 변경이되며 또한 반대로 데이터가 변경이 되면 즉각적으로 화면도 변경이 됨으로써 즉각적인 화면을 사용자는 볼 수 있습니다.

 

 

 

 

Vue 프로젝트 생성

 

1. [file] - [New] - [Project] - [JavaScript] - [Vue.js]- Next

 

 

 

 

 

 

2. 프로젝트명을 입력하시고 Vue CLi 부분을 확인 후 [Next] 를 클릭하면 Vue Cli가 설치 될 것입니다. 

※ Vue CLi

커맨드 라인 인터페이스로 명령어를 입력하여 동작을 수행하도록 하는 것입니다. 리눅스를 사용해 보셨으면 더욱 잘 알 것 이라 생각합니다. 

 

 

 

3. 아래는 프로젝트 구조 입니다. 

 

 

 

3-1)  package.json 

package.json 

{
  "name": "vue-poooney",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

 

 

위의 package.json 은 해당 패키지 버전의 정보름 담고 있습니다. 터미널 창에서 npm install을 하면 package.json을 읽고 필요한 라이브러리 또는 필요 파일들을 다운받아주기도 하고 serve,build, lint 와 같은 스크립트 정보를 담고 있기도 합니다. 

 

 

3-2) node_modules

 각종 라이브러리들은 node_modules에 존재 하게 됩니다. 

 

 

3-3) src 

소스코드들은 src 폴더 밑에 존재 하게 됩니다. 

 

 

 

 

프로젝트 실행

 

 

 

1. 우측 상단의 실행버튼을 클릭해주세요 또는 터미널 창에 [npm run serve]를 입력 하셔도 됩니다. 

 

 

2. 아래와 같이 구동되면서 우측 하단에 Local 주소를 보여 줄 것입니다.  그러면 해당 주소를 브라우저에 입력해주세요.

 

 

3.  브라우저를 키고 http://localhost:8080/ 를 입력하면 아래와 같은 초기 페이지가 나올 것 입니다. 그러면 성공! 입니다 

 

 

 

 

 

 

 

해당 페이지는 [src] - [App.vue]의 페이지가 출력된 것입니다. 

 

 

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

 

 

App.vue에는 <template> 태그도  존재하고, import,export 등 기존 css,html,js의 형태와는 다른점이 꽤 보이는데 해당 부분을 이해하려면 Vue 인스턴스, Lifecycle을 잘 이해 하는 것이 중요합니다.  다음 장에서 Vue 인스턴스에 대해서 설명 하도록 하겠습니다.