[Vue.js] Spring Boot + Vue.js 개발환경 셋팅

 

개발환경

JDK : 1.8

Spring Boot

lombok

Thymeleaf

Vue Cli : 2.9.6

Vue.js : Version 2.x

node.js : 16.14.2

npm : 8.5.0

Database : PostgreSQL

---

1. Spring Boot 환경설정

application.yml

# WAS server setting
server:
  port: 9090
  servlet:
    context-path: /
    encoding:
      charset: UTF-8
      enabled: true
      force: true
    session:
      timeout: 3600                              # 기본단위 : 초
      
  tomcat:
    uri-encoding: UTF-8                         # Spring Default : UTF-8

spring:
  profiles: 
    active: local                               # local, test, prod 로 설정하면 개발환경에 도움이 되지 않을까..?

  security:
    user:
      name: user
      password: 1111                            # Spring Security Default password 변경

  thymeleaf:
    cache: false
    
# JSP 설정을 막음.
#  mvc:
#    view:
#      prefix: /WEB-INF/jsp/                                   # View Resolver setting
#      suffix: .jsp

  datasource:
      url: jdbc:postgresql://localhost:5432/springboot
      username: hermeswing
      password: pass
      hikari:
        idle-timeout: 10000
        maximum-pool-size: 10
        minimum-idle: 5
        pool-name: BaseHikariPool

http://localhost:9090

---

2. Visual Studio Code 다운로드 및 설치

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

3. Node.js 다운로드 및 설치

https://nodejs.org/ko/download/

다운로드 | Node.js

---

4. VSCode Default Terminal 설정

[파일] > [기본설정] > [설정]

"default profile" 로 검색 > Terminal > Integrated > Default Profile : Windows > Command Prompt 로 변경

Restart 후 터미널의 모습

플러그인 설치

Auto close Tag

ESLint

Live Server

Prettier - Code formatter

Vetur

5. Node.js 확인

C:\Users\[USER]>node -v
v16.14.2

C:\Users\[USER]>npm -v
8.5.0

C:\Users\[USER]>echo %PATH% 
C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Program Files\Git\cmd;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\PowerShell\7\;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\nodejs\;C:\Python\Python310\Scripts\;C:\Python\Python310\;C:\Users\jongyoung.park\AppData\Local\Microsoft\WindowsApps;C:\Users\jongyoung.park\AppData\Local\Programs\EmEditor;C:\Program Files\Bandizip\;C:\JetBrains\IntelliJ IDEA 2021.2.3\bin;;C:\java\openjdk11.28_-x64\bin;;C:\JetBrains\PyCharm 2021.3\bin;;C:\Users\jongyoung.park\AppData\Roaming\npm

6. Vue.js 다운로드 및 설치

VSCode > 터미널 > 새 터미널

npm i -g @vue/cli -> 아래와 같은 오류가 발생하면..

npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[USER]\AppData\Local\npm-cache\_logs\2022-04-05T09_15_38_386Z-debug-0.log

C:\Users\[USER]>

관리자 권한으로 VSCode 실행 후 Terminal 에서 다시 실행하세요. ( 최신버전으로 다운로드 됩니다. )

vue-cli 설치 (Ver 2.x) : npm i -g vue-cli 또는 npm install vue-cli -global   ( 관리자 권한으로 )

vue-cli 삭제 (Ver 2.x) : npm uninstall -g vue-cli  ( 관리자 권한으로 )

C:\>npm i -g vue-cli
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli

added 245 packages, and audited 246 packages in 11s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

vue-cli 버전확인 ( 2.x 버전을 설치하면 ... )

C:\>vue --version
2.9.6

7. Vue 프로젝트 생성

Spring Boot 프로젝트 폴더( C:\project\workspace\vueboot ) 로 이동합니다.

(Vue Ver 2.x ) vue init webpack vue --no-git

C:\project\workspace\vueboot>vue init webpack vue --no-git

? Target directory exists. Continue? Yes
? Project name vue
? Project description A Vue.js project
? Author jongyoung.park <hermeswing@naver.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "vue".


# Installing project dependencies ...
# ========================

Running eslint --fix to comply with chosen preset rules...
# ========================


> vue@1.0.0 lint
> eslint --ext .js,.vue src test/unit "--fix"


Oops! Something went wrong! :(

ESLint: 7.32.0

ESLint couldn't find the config "standard" to extend from. Please check that the name of the config is correct.

The config "standard" was referenced from the config file in "C:\project\workspace\vueboot\vue\.eslintrc.js".

If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.


# Project initialization finished!
# ========================

To get started:

  cd vue
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

---

vue-cli 설치 (Ver 3.x) : npm i -g @vue/cli 또는 npm install @vue/cli -global  ( 관리자 권한으로 )

vue-cli 삭제 (Ver 3.x) : npm uninstall -g @vue/cli  ( 관리자 권한으로 )

C:\Users\[USER]>npm i -g @vue/cli
[#########.........] / reify:is-descriptor: http fetch GET 200 https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz 272
[#########.........] | reify:define-property: http fetch GET 200 https://registry.npmjs.org/define-property/-/define-property-1.0.0.t
[#########.........] / reify:static-extend: http fetch GET 200 https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz 280npm 
WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[#########.........] \ reify:set-value: http fetch GET 200 https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz 2886ms (cache mnpm 
WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
...
...
[##################] / reify:core-js-pure: http fetch GET 200 https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.21.1.tgz 8393m

added 895 packages, and audited 896 packages in 27s

84 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm i -g @vue/cli-init

npm i -g @vue/cli-init 는 이전 버전으로 다운그레이드 하는 명령어 입니다.

C:\Users\[USER]>npm i -g @vue/cli-init
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli

added 259 packages, and audited 260 packages in 11s

11 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

npm update -g @vue/cli

npm update -g @vue/cli 는 최신 버전으로 업그레이드 하는 명령어 입니다.

vue-cli 버전확인 ( 3.x 버전을 설치하면 ... )

C:\> vue --version
@vue/cli 5.0.4

C:\> vue.cmd --version
@vue/cli 5.0.4

---

7. Vue 프로젝트 생성

Spring Boot 프로젝트 폴더( C:\project\workspace\vueboot ) 로 이동합니다.

(Vue Ver 3.x ) vue create vue --no-git

Yes 선택합니다.

Default ([Vue 2] babel, eslint) 를 선택합니다.

C:\project\workspace\vueboot>vue create vue --no-git
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes

Vue CLI v5.0.4
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
> Default ([Vue 2] babel, eslint) 
  Manually select features 

Vue CLI v5.0.4
✨  Creating project in C:\project\workspace\vueboot\vue.
⚙️  Installing CLI plugins. This might take a while...

[######............] | idealTree:vue-style-loader: sill fetch manifest universalify@^2.0.0

added 858 packages in 1m
🚀  Invoking generators...
📦  Installing additional dependencies...


added 83 packages in 10s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue.
👉  Get started with the following commands:

 $ cd vue
 $ npm run serve

---

Eclipse 프로젝트를 새로고침(F5)를 하면 Vue 폴더가 생성되었음을 알 수 있습니다.

8. Terminal 추가

---

9. 실행

npm run serve

 DONE  Compiled successfully in 3891ms                                                                                                                                                                                                                                                                         오후 10:16:00


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.55.131:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

10. Server 중단

Ctrl + C

일괄 작업을 끝내시겠습니까 (Y/N)? y

C:\project\workspace\vueboot\vue>

---

11. vue.config.js 파일 변경

/*
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})
*/
module.exports = {  
  outputDir: "../src/main/resources/static",             // outputDir은 npm run build로 빌드 시 파일이 생성되는 위치
  indexPath: "../static/index.html",                     // indexPath는 index.html 파일이 생성될 위치를 지정
  devServer: {                                           // devServer는 Back-End , 즉 Spring Boot의 내장 was의 주소를 작성하게 되면 된다.
    port: 4545,
    proxy: "http://localhost:8080"  
  },  
  chainWebpack: config => {  
    const svgRule = config.module.rule("svg");    
    svgRule.uses.clear();    
    svgRule.use("vue-svg-loader").loader("vue-svg-loader");  
  }  
};

 DONE  Compiled successfully in 6220ms                                                                                                                                                                                                                 오오후후 11:28:30


  App running at:
  - Local:   http://localhost:4545/
  - Network: http://192.168.55.131:4545/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

---

12. npm install

C:\project\workspace\vueboot\vue>npm install

up to date, audited 921 packages in 1s

91 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

build 된 파일이 생성된 모습

Spring Boot Start

  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
 :: Spring Boot ::                (v2.6.6)

2022-04-06 00:25:52.501  INFO 6744 --- [           main] com.study.vueboot.VuebootApplication     : Starting VuebootApplication using Java 1.8.0_202 on DESKTOP-M8928OS with PID 6744 (C:\project\workspace\vueboot\target\classes started by [USER] in C:\project\workspace\vueboot)
2022-04-06 00:25:52.505  INFO 6744 --- [           main] com.study.vueboot.VuebootApplication     : The following 1 profile is active: "local"
2022-04-06 00:25:53.813  INFO 6744 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat initialized with port(s): 9090 (http)
2022-04-06 00:25:53.832  INFO 6744 --- [           main] o.apache.catalina.core.StandardService   : Starting service [Tomcat]
2022-04-06 00:25:53.832  INFO 6744 --- [           main] org.apache.catalina.core.StandardEngine  : Starting Servlet engine: [Apache Tomcat/9.0.60]
2022-04-06 00:25:53.958  INFO 6744 --- [           main] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring embedded WebApplicationContext
2022-04-06 00:25:53.958  INFO 6744 --- [           main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 1392 ms
2022-04-06 00:25:54.443  INFO 6744 --- [           main] o.s.b.a.w.s.WelcomePageHandlerMapping    : Adding welcome page: class path resource [static/index.html]
2022-04-06 00:25:54.523  WARN 6744 --- [           main] ion$DefaultTemplateResolverConfiguration : Cannot find template location: classpath:/templates/ (please add some templates or check your Thymeleaf configuration)
2022-04-06 00:25:54.603  INFO 6744 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 9090 (http) with context path ''
2022-04-06 00:25:54.611  INFO 6744 --- [           main] com.study.vueboot.VuebootApplication     : Started VuebootApplication in 2.839 seconds (JVM running for 9.089)
2022-04-06 00:25:59.285  INFO 6744 --- [nio-9090-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
2022-04-06 00:25:59.286  INFO 6744 --- [nio-9090-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
2022-04-06 00:25:59.286  INFO 6744 --- [nio-9090-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 0 ms

http://localhost:9090

---

https://mr-spock.tistory.com/3

Spring Boot + Vue CLI 3.0 프로젝트 구성하기

https://cli.vuejs.org/guide/installation.html

Installation | Vue CLI

https://velog.io/@kdeun1/Vue-3-Composition-API-TypeScript-Vuex-4%EB%A1%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0

Vue.js 3 정리하기 (Vue-CLI 4, Vue 3, Composition API, TypeScript, Vuex 4)