smartERPLite Vue Document

Appearance

Return to top
On this page

시작하기

Overview

smart-lite, smart-chat, smart-pms의 화면은 vue 3 로 개발하고, 서버는 spring-boot framework를 이용한 java 프로젝트로 개발한다.

SVN Repository

smart-lite

svn://192.168.0.7/smart-lite

smart-chat smart 채팅. 추후 다른 프로젝트에서도 사용할 수 있게 독립된 프로젝트로 관리.

svn://192.168.0.7/smart-chat

smart-lic 통합사용자는 smarterp의 license 서버를 이용한다.

svn://192.168.0.7/vmerp-lic

로컬 개발 서버

로컬에서는 backend를 위한 tomcat 서버와 frontend를 위한 vite 서버가 각각 실행한다.
, vite는 vue로 작성된 javascript와 html의 실행을 담당한다.

backend

backend는 db와 연동해서 데이터를 처리하는 api 서버 역할을 하는 tomcat을 실행 한다.
소스코드는 JAVA와 Springframework boot 2.x를 사용하여 작성한다.

backend 서버 빌드와 실행
서버를 실행하려면 체크아웃 받은 후에 프로젝트를 Maven Project로 변환한다.

  1. sts의 Project Explorer에서 프로젝트를 선택.
  2. 마우스 오른쪽을 누르면 나오는 메뉴중에서 Configure > Convert to Maven Project를 클릭.
  3. Maven update가 실행되고 빌드가 완료된다.
  • Problem view에 'maven dependency' 관련해서 'jar'를 못차는 오류가 발생할 경우 해당 위치의 폴더를 찾아서 삭제하고 Maven update를 수동으로 실행.
  1. sts의 view 중에서 Boot Dashboard에 있는 smart-lite를 찾아서 실행.
  2. 최초 실행시 Main class의 위치를 물어보면 com.vmerp.SmartLiteApplication을 선택한다.
  3. backend 서버는 http://localhost:3030/ 에서 동작한다.

frontend

frontend는 브라우저에서 접속해서 vue로 작성된 프로그램의 실행을 담당하는데, vue3의 개발환경 tool중에서 vite를 사용한다.
소스코드는 vue 3.x의 script setup 문법을 사용한 SPA(Single Page Application)으로 개발한다.
vue 3 script setup guide

frontend 서버 실행
vscode에서 프로젝트 루트의 app폴더를 오픈한다. vscode에서 터미널을 열고 다음의 명령을 실행한다. 서버가 실행되면 브라우저가 열리면서 http://localhost:3000/로 접속한다.

C:\vmerp\workspace\smart-lite\app>npm i
# npm 설치 로그 출력

# vue 서버 실행
C:\vmerp\workspace\smart-lite\app>run

C:\vmerp\workspace\smart-lite\app>npm run local 

> app@0.0.0 local C:\vmerp\workspace\smart-lite\app
> vite --force

Pre-bundling dependencies:
  vue
  inputmask
  axios
  date-fns
  @vue/reactivity
  (...and 3 more)
(this will be run only when your dependencies or config have changed)

  vite v2.7.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 4142ms.

WARNING

vite를 global로 설치하면 vite가 버전업되면 global과 local의 버전이 달라지므로 global설치는 추천하지 않음.
global로 설치한 경우 삭제하고 local로 실행한다. run.bat으로 실행하면 local의 vite로 실행된다.

vue 또는 vite 버전업

svn으로 동기화 할때 package.json이 update 대상으로 있으면 라이브러리가 변경 된것이므로 npm을 재설치 한다.
rd명령으로 node_modules 폴더를 삭제하고 재설치한다.

C:\vmerp\workspace\smart-lite\app>rd /s /q node_modules
C:\vmerp\workspace\smart-lite\app>npm i

Spring Tool Suite 4 설정

  • svn 플러그인 : sts를 처음 설치하면 없으므로 설치한다.

    1. Help > Eclipse Marketplace를 선태한다.
    2. Find에서 subclipse로 검색한다.
    3. 검색결과중에서 Subclipse 4.3.3을 설치한다.(Subversive를 선택하면 안된다.)

  • mybatis용 플러그인을 설치한다.

    1. Help > Eclipse Marketplace를 선태한다.
    2. Find에서 mybatipse로 검색한다.
    3. 검색결과중에서 MyBatipse를 설치한다.

  • lombok 설치

    1. eclipse(STS)에 lombok(롬복) 설치 참조
    2. pom.xml에는 추가되있으므로 2번 부터 진행한다.

  • Validation 끄기

    1. Window > Preference > Validation 을 클릭한다.
    2. Suspend all validators를 찾아서 체크하고 Apply를 클릭한다.

  • Java runtime 설정

    1. Window > Preference > Java > Installed JREs를 클릭한다.
    2. Add를 눌러서 설치된 java를 추가한다.
    3. java 버전은 1.8이어야 한다.
    4. jre와 jdk중에서 jdk를 선택해야 한다.

  • node_modules 제외 설정

    1. sts의 explorer에서 smart-lite에서 우클릭해서 Properties를 선택한다.
    2. 제일 위에 있는 Resource를 펼치고 Resource Filters를 선택한다.
    3. 우측의 Add Filter 버튼을 클릭한다.
      1. Filter type은 Exclude all
      2. Applies to는 Folder
      3. All children(recursive)에 체크한다.
      4. File and Folder Attributes 입력란에 node_modules를 입력한다.
      5. OK 클릭한다.

Hello

Copyright © 2022 SmartBiz