토이프로젝트 (spring+vue3)

환경설정

1. jdk 설치

2. node.js 설치

3. vue-cli 설치

$ npm i -g @vue/cli
$ npm i -g @vue/cli-init

 

1. 

vue create와 vue init webpack의 차이점은 vue-cli 2.x.x.와 vue-cli 3.x.x 버전대의 명령어 차이

$ vue init webpack frontend

2.

FE

1. build target directory 설정

config/index.js에서 아래와 같이 경로 수정

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../backend/src/main/resources/static/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../backend/src/main/resources/static'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ...
   }

2. npm run build해서 backend/resources/static에 생성되는지 확인

3. el-element-plus 사용

# Choose a package manager you like.

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

main.js에 Element Plus를 import 하는 두 코드를 추가한다.

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

auto import를 위해서는 모듈을 추가로 설치해야 한다.
먼저 unplugin-vue를 설치하고 unplugin-auto-import를 설치한다.

npm install -D unplugin-vue-components unplugin-auto-import