Vue.js 사용하기

프로젝트를 진행하면서 백엔드만 구현할까 프론트도 구현할까 고민을 좀 했었다.

한다면 프론트도 그냥 서버사이드랜더링으로 thymeleaf로 간단하게 해볼까 Vue를 사용할까도 고민하다가 처음부터 혼자 vue를 세팅해본적은 없는 것 같아 도전하기로 했다.

 

실무를 하면서는 Vue CLI로 했었는데 이번에는 Vite로 도전해보았다.

 

https://nodejs.org/ko/download

다운로드 | Node.js

 

여기에서 node.js를 우선 다운받아 설치파일을 실행했다.

 

node -v
npm -v

 

터미널에서 위와 같이 설치 확인을 해 버전 정보를 확인했다.

 

그리고 vue 프로젝트를 생성하기 위해 

npm init vue@latest

명령어를 친 뒤 진행하였다.

 

만들어진 프로젝트로 이동한 후 npm install을 진행했다.

npm install

 

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    outDir: "../resources/dist/pilot"
  },
  server: {
    proxy: {
      "/api": "http://localhost:9922"
    }
  }
})

 

vite.config.js 파일에서 백엔드 개발할 때 했던 포트를 지정해주었다.

 

 

그 후 npm run dev로 실행해보았다.

npm run dev

 

그랬더니 초기 화면이 잘 실행되었다.

이제 다음부터는 axios 설정도 하고 본격적으로 화면을 구현해봐야겠다. 망망!