vue.js 프로젝트 생성 (cli)

Vue 설치 (cli 설치방법)

# npm 으로 vue-cli 설치
npm install -g @vue/cli

# project Create 
vue create {my-project-name} --no-git

옵션

• --no-git : 깃 파일을 생성하지 않음

Vue CLI 공식 Refrence

Installation | Vue.js

Installation | Vue.js

Installation | Vue CLI

Installation | Vue CLI

명령어를 실행 하고 나면, 새롭게 생성된 vue 폴더를 확인 할 수 있다.

 

skan@mezzoui-MacBookPro test % vue create front-end-02 --no-git


Vue CLI v4.5.15
? Please pick a preset: Default (Vue 3) ([Vue 3] babel, eslint)


Vue CLI v4.5.15
✨  Creating project in /Users/mezzo-skan/git/test/front-end-02.
⚙️  Installing CLI plugins. This might take a while...


added 1276 packages, and audited 1277 packages in 20s

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

28 vulnerabilities (17 moderate, 11 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
🚀  Invoking generators...
📦  Installing additional dependencies...


added 73 packages, and audited 1350 packages in 5s

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

30 vulnerabilities (19 moderate, 11 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project front-end-02.
👉  Get started with the following commands:

 $ cd front-end-02
 $ npm run serve

 

프로젝트 폴터(vue 폴더) 로 이동하여 실행 하는 방법까지 알려준다.

서비스 구동

cd vue
# 서버 구동
$ npm run serve
# 빌드 
$ npm run build



mezzo-skan@mezzoui-MacBookPro front-end-02 % npm run serve

> front-end-02@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 2490ms                                                                                                                                                             4:17:26 PM


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

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

 

node.js 로 구동된 서비스 확인

 

 

Spring Boot static 폴더로 파일 옮기기

만약 vue에서 나온결과물을 Spring boot static 폴더로 옮겨서 front 와 server 를 굳 같이 두겠다면 다음과 같이 수행한다. (하지만 이방법은 비추한다.) vue ROOT 폴더 에 vue.config.js 파일을 생성하여, npm build 시 spring boot static 폴더로 빌드되도록 수정 한다.

module.exports = {  
  outputDir: "../src/main/resources/static",  
  indexPath: "../static/index.html",  
  devServer: {  
    proxy: "http://localhost:8080"  
  },  
  chainWebpack: config => {  
    const svgRule = config.module.rule("svg");    
    svgRule.uses.clear();    
    svgRule.use("vue-svg-loader").loader("vue-svg-loader");  
  }  
};

• outputDir : npm build 시 파일이 생성되는 위치
• indexPath : index.html 파일이 생성되는 위치
• devServer : Back - End Server 의 주소

npm run build 를 실행하고 나면 src/resource/static 폴더 밑으로파일이 생성된것을 확인 할수 있다. Spring Boot Web Application을 실행한후 http://localhost:8080 으로 접속하면 Vue.js index.html 화면을 확인 할 수 있다.

Web Application 에서 Controller 없이도 url mapping 되어 index.html로 어떻게 가는지 궁금할텐데, spring-starter-web-tomcat 은 기본적으로 static 파일 밑에 index.html을 읽어 들이도록 설정되어 있다. 자세한 설정은 spring boot 문서 참조 할것.