FRONTEND 생성, 설정 및 페이지 접속
TOOL
VSCode
✔️ NODE 설치
경로 설정
BACKEND에서 생성했던 Spring Boot 프로젝트의 static 폴더 아래 FRONTEND 작업 영역(directory)를 설정한 후 진행
해당 프로젝트
static 폴더 아래 vue 폴더를 생성한 후 아래 내용 진행
해당 프로젝트
static 폴더 아래 vue 폴더를 생성한 후 아래 내용 진행
BACKEND 생성
https://velog.io/@garamnoh/APP-BACKEND-SPRING-BOOT
설치
-
CMD 실행
-
vue create {project명}
C:\Users\...\wApp\src\main\resources\static\vue> vue create front
- Please pick a preset: Manually select features :
Babel, TS, PWA, Router, Vuex - Choose a version of Vue.js : 3.x
- Use class-style component syntax? No
- Use Babel alongside TypeScript? Yes
- Use history mode for router? Yes
- Pick a CSS pre-processor : Sass/SCSS (with dart-sass)
- Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files - Save this as a preset for future projects? No
Vue CLI v5.0.4
┌─────────────────────────────────────────┐
│ │
│ New version available 5.0.4 → 5.0.8 │
│ Run npm i -g @vue/cli to update! │
│ │
└─────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: preset
? Pick the package manager to use when installing dependencies: Yarn
🎉 Preset preset saved in C:\Users\...\.vuerc
Vue CLI v5.0.4
✨ Creating project in C:\Users\...\Desktop\grnoh\workspace\app\wApp\src\main\resources\static\vue\front.
⚙️ Installing CLI plugins. This might take a while...
yarn install v1.22.18
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
info To upgrade, run the following command:
$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Done in 32.48s.
🚀 Invoking generators...
📦 Installing additional dependencies...
yarn install v1.22.18
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 10.89s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project front.
👉 Get started with the following commands:
$ cd front
$ yarn serve✔️ YARN 오류로 NPM 사용으로 변경
변경하는 방법
- node_modules 삭제
- yarn.lock 파일 삭제
- npm 설치
터미널에서 npm 설치 (vscode - terminal 단축키 : ctrl + `)
> npm install - 프로젝트 실행
> npm run serve
프로젝트 실행
- npm run serve
> front@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 6770ms
App running at:
- Local: http://localhost:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
No issues found.
