Vue.js 처음하는 설치 및 샘플예제

spring boot port 8080

vue port localhost:8081

 

vue cli 설치

$ npm install -g @vue/cli

vue 설치

$ vue create front

 

•  vue.config.js 파일 추가 (front 프로젝트 root 폴더)
• http-common.js 파일 추가 (http 통신에 관련된 사항 기술 src 폴더)
• Vue router 추가 (다중 페이지 처리)
• axios 추가 (http 통신 처리)
  
  
  

  vue.config.js
  
  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");
  }
  };

  
  

  http-common.js
  import axios from "axios"
  
  export default axios.create({
  baseURL: "http://localhost:8081", // vue port 같이 해준다.
  header:{
  "Content-type":"application/json",
  }
  });

  
  
  
  vue router 설치

  $ npm install vue-router --save

  
  
  vue router 기본 템플릿 설치

  $ vue add router

  history 모드 N

https://router.vuejs.org/kr/guide/essentials/history-mode.html#%E1%84%89%E1%85%A5%E1%84%87%E1%85%A5-%E1%84%89%E1%85%A5%E1%86%AF%E1%84%8C%E1%85%A5%E1%86%BC-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6

HTML5 히스토리 모드 | Vue Router

 

http 통신하기 위해 axios 설치

$ npm i axios

빌드 실행

$ npm run build

 

 

참고

https://rangsub.tistory.com/100