Vue 파일 작성 #

vue 파일 생성 #

1. 업무용 프로그램의 최상위 폴더인 /src/views/에 생성한다.
2. 로그인 또는 새로고침 할때 메뉴데이터를 불러오는데, 메뉴에는 SYS_PROGRAM 테이블의 PROGRAM_URL 정보가 들어 있다. PROGRAM_URL은 /view/업무구분/snake-case형식의 프로그램의 이름/Pascal-case의 프로그램 컴포넌트이름.vue로 되어 있다.
   ex) /view/회계/경비승인관리

/views/fim/expense-approval-management/ExpenseApprovalManagement.vue

프로그램은 하나의 vue파일로 작성할 수도 있고 여러개의 서브 vue 를 가질 수 있는데, 그중에 대표컴포넌트가 메뉴 클릭시 오픈된다. 대표 컴포넌트는 snake-case의 폴더명과 동일한 pascal-case의 vue파일이다.

3. vue파일을 생성한다.
4. 열린 파일에서 vue를 입력하고 Ctrl+Space를 누르면 vue의 snippet을 선택할 수 있다.

# vue파일 최상단
vue   //입력 후 Ctrl+Space

# 제안된 vue를 선택하면 기본 boilerplate코드가 생성된다.
<template>

</template>

<script setup lang="ts">
import { reactive, ref } from "vue"
</script>

3. html 코드는 <template> 영역에 작성한다.
4. typescript 코드는 <script setup lang="ts"> 영역에 작성한다.

import #

import 경로. 함수 또는 컴포넌트 입력후 ctrl+space를 눌러서 자동 import 기능을 사용한다.
vue의 함수는 from '@vue/runtime...' 대신 모두 from 'vue'로 통일 한다.

<script setup lang="ts">
// 공통 프로그램은 '@/core'
// wijmo 관련 자주 쓰이는것도 '@/core'
import { http, useAutoseq, vmAlert, vmConfirm, VmFlexGrid, DataType } from '@/core'
// vue는 'vue'
import { reactive } from 'vue'

// 서브 컬포넌트는 상대경로
import { FlexItem } from '../form-grid-use/types'
</script>

함수를 외부로 분리

가독성을 위해서 또는 여러 컴포넌트간에 공유할 변수와 함수는 별도의 ts파일에 작성하고 import 할 수 있다.