vue 기초

vue의 경우  node를 사용하지 않아도 cdn을 통해 사용할수 있습니다. 

하지만 좀 더 전문적인 프로그램을 사용하기 위해서는 node를 설치하여 사용하는것이 일반적입니다. 

저는 맥 환경내 brew를 통해 node 및 npm을 설치하였습니다. 

 

1.node 설치

brew install node 

 

2.npm 설치

brew install npm 

 

1과 2번의 과정을 통해 사용자의 컴퓨터에 node와 npm이 설치되었습니다.

간단히 node는 서버이고 npm의 경우 node내 플러그인을 관리해주는 도구입니다. 

 

3.npm install vue 

npm을 통해 vue 플러그인을 설치해줍니다. 

 

4.vue create 프로젝트 명 

별도 파일을 생성하지 않았다면 파일이 생성되며 vue 구동에 필요한 여러 프로그램이 설치됩니다. 

예를 들자면 spring.io에서 생성하는 간단한 HelloWorld를 보여주는 화면이라고 보시면 됩니다. 

 

5.vue add router 

vue의 경우 경로에 대해 router 라이브러리를 통해 별도 로딩 없이 이동을 할 수 있습니다. 

create 시 메뉴얼 대로 하셨다면 별도 설치가 필요 없습니다. 

 

6.vue.config 설정 

config 파일을 통해 빌드 시 파일 생성 및 메인인 index파일위치 , 프록시를 지정할 수 있습니다. 

프록시의 경우 저는 백엔드를 spring 을 통해 프론트를 vue를 통해 만들것이기에 spring 빌드시 설정한 기본 포트인

http://localhost:8080를 사용할 것입니다. 

간단한 설정 양식입니다. 

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

 

7.npm run build 

기초 설정을 다 하셨다면 빌드를 통해 서버를 구동할 준비를 할 수 있습니다. 

자바로 치자면 .java를 .class 파일로 변환하는 과정이 될것 입니다. 

성공시 아래와 같이 나옵니다. 

8.npm run serve 

위 명령을 통해 해당 서버를 실행 할 수 있습니다. 

성공 시 아래와 같이 나옵니다.