IntelliJ에서 vue.js 시작하기

[1] intelliJ로 vue.js 프로젝트 시작하기

[2] vue.js spring boot server와 통신하기 

 

개요

IntelliJ를 활용하여 vue.js 프로젝트를 만들어나가는 과정을 기록하려 합니다.

현재 node와 vue모두 설치되어 있지 않습니다.

node --version
zsh: command not found: node
vue --version
zsh: command not found: vue

 

HomeBrew로 Node 설치

brew install node
node --version
v19.7.0

Vue.js는 Node.js 환경에서 동작하기 때문에, Node.js를 설치해야 합니다. Node.js는 Vue.js 개발에 필요한 npm(Node Package Manager)을 포함하고 있습니다. Vue

 

CLI 설치

 

npm install -g @vue/cli
vue --version
@vue/cli 5.0.8

Vue.js 프로젝트를 생성하고 관리하기 위해서는 Vue CLI(Command Line Interface)를 설치해야 합니다. Vue CLI를 사용하면 Vue.js 프로젝트를 쉽게 생성하고 관리할 수 있습니다.Vue CLI 설치

Vue CLI를 설치하려면 npm을 사용하여 다음 명령어를 실행합니다.

 

 

IntelliJ vue.js 플러그인 설치

Vue.js 플러그인은 IntelliJ IDEA Marketplace에서 무료로 제공됩니다.

Preference -> plugins -> vue.js 설치

 

새로운 프로젝트 생성

File -> New -> Project -> Vue.js 선택 -> Create

vue.js 플러그인을 설치하면 Generators에 Vue.js가 보이게 됩니다.

 

실행

상단 npm serve에 보이는 실행버튼을 눌러보면 localhost:8081으로 접속가능합니다.

 

 

Hello.vue 수정해 보기

<template>
  <div>
    <h1>Hello, Vue!</h1>
  </div>
</template>

components 하위에 있는 HelloWorld.vue 파일을 수정합니다.

이제 Hello, Vue가 표시됩니다.

 

 

이미지는 어디서 보이는 거지?

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</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라는 파일이 보입니다.

Vue.js에서 기본적으로 생성되는 파일 중 하나로 애플리케이션의 루트 컴포넌트입니다.

Vue.js는 여러 개의 컴포넌트를 조합하여 앱을 구성합니다.

App.vue 파일은 애플리케이션의 전체 레이아웃과 라우팅 설정, 다른 컴포넌트들을 로드하고 렌더링 하는 역할을 수행합니다.

 

기본적으로 3가지 섹션으로 구성됩니다.

• template
  • HTML 마크업정의
  • 애플리케이션의 전체 레이아웃을 작성합니다.
• script
  • JavaScript 코드
  • 컴포넌트의 로직과 데이터를 정의
• sytle
  • CSS 스타일정의
  • 컴포넌트의 스타일 정의

 

여기서 이미지는 template 섹션에서 정의되는 것을 볼 수 있습니다.

img 태그를 제거하면 이제 이미지는 더 이상 보이지 않습니다.

 

애플리케이션 포트 변경하기(vue.config.js)

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 3000
  },
})

8081 포트를 사용하여 애플리케이션이 구동됩니다.

포트를 3000으로 변경해보고자 합니다.

 

vue cli를 이용해서 프로젝트를 생성한 경우(인텔리제이가 생성) vue.config.js파일이 존재합니다.

vue.config.js 파일은 CLI에서 생성된 프로젝트에서 기본적으로 포함되는 파일입니다.

설정 파일으로써 webpack 설정, 개발 서버 설정등을 수정할 수 있습니다.

 

transpileDependencies 옵션이 기본적으로 설정되어 있으며 이는 Bable로 컴파일되는 모든 모듈과 라이브러리가 컴파일 대상임을 설정합니다.

여기에 devServer 객체 내부에 port 프로퍼티 수정을 통해 포트 번호를 변경할 수 있습니다.