sakai vue cli

Vue용 Sakai 관리 템플릿

실시간 미리보기

실시간 미리보기를 보려면 Sakai Vue 웹사이트를 방문하세요.

시작하기

Sakai는 Vue 프로젝트를 위한 기본 표준 도구를 제공하는 Vue CLI 기반 Vue용 애플리케이션 템플릿입니다. 시작하려면 GitHub에서 이 저장소를 복제하고 npm 또는 Yarn을 사용하여 종속성을 설치하세요.

 npm install

또는

 yarn

다음 단계는 서비스 스크립트를 사용하여 애플리케이션을 실행하고 http://localhost:8080/ 으로 이동하여 애플리케이션을 보는 것입니다. 이제 Sakai 템플릿을 사용하여 애플리케이션 개발을 시작할 수 있습니다.

 npm run serve

Vue CLI 스크립트

다음 명령은 create-app-app에서 파생됩니다.

 "npm run serve": Starts the development server
"npm run build": Builds the application for deployment.
"npm run lint": Executes the lint checks.
"npm run test:unit": Runs the tests.

구조

Sakai는 두 가지 주요 부분으로 구성됩니다. 애플리케이션 레이아웃과 리소스. src 폴더 내의 App.vue 는 기본 레이아웃에 대한 템플릿을 포함하는 주요 구성 요소이며 레이아웃에 필요한 SASS 구조와 같은 필수 리소스는 src/assets/ 폴더 내에 배치됩니다.

레이아웃 구성요소

기본 레이아웃은 App.vue 의 템플릿이며 상단 표시줄, 메뉴 및 바닥글과 같은 몇 가지 하위 구성 요소로 나뉩니다. 다음은 메뉴 상태, 레이아웃 모드 등과 같은 논리를 구현하는 App.vue 구성 요소의 템플릿입니다.

메뉴

메뉴는 PrimeVue MenuModel API를 기반으로 AppMenu.vue 파일에 정의된 별도의 구성 요소입니다. 메뉴 항목을 정의하려면 App.vue 파일의 데이터 섹션으로 이동하고 메뉴 속성을 사용하여 자신의 모델을 중첩 구조로 정의하십시오.

종속성

Sakai의 종속성은 아래에 나열되어 있으며 package.json에 추가되어야 합니다.

{
    "primevue" : " ~3.12.2 " ,
    "primeicons" : " ~5.0.0 " ,
    "primeflex" : " ~3.1.2 " ,
}

PrimeVue 테마

Sakai는 PrimeVue 내에서 배포되는 무료 Saga, Arya 및 Vela 테마를 사용하지만 레이아웃 색상은 CSS 변수를 통해 사용되는 테마에서 파생되므로 머티리얼, tailwind 및 bootstrap과 같은 모든 PrimeVue 테마와 함께 사용할 수 있습니다.

SASS 변수

레이아웃 변수를 사용자 정의하려면 src/layout 폴더 아래에 있는 _variables.scss 파일을 엽니다. 대부분의 변수가 사용 중인 PrimeVue 테마에서 파생되므로 목록이 매우 짧습니다.

소스/자산/_variables.scss

$fontSize : 1rem;
$b or derRadius : 12px;
$transitionDuration : .2s;