sakai vue cli

Vue 的 Sakai 管理模板

即時預覽

造訪 Sakai Vue 網站進行即時預覽。

入門

Sakai 是一個基於 Vue CLI 的 Vue 應用程式模板，為 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 由 2 個主要部分組成；應用程式佈局和資源。 src 資料夾內的App.vue是包含基本佈局範本的主要元件，而佈局所需的資源（例如 SASS 結構）則放置在src/assets/資料夾內。

佈局元件

主要佈局是App.vue的模板，它分為幾個子元件，例如頂欄、選單和頁腳。這是App.vue元件的模板，它實作了選單狀態、佈局模式等邏輯。

選單

Menu 是基於 PrimeVue MenuModel API 在AppMenu.vue檔案中定義的單獨元件。為了定義選單項，請導覽至App.vue檔案的資料部分，並使用menu屬性將您自己的模型定義為巢狀結構。

依賴關係

下面列出了 Sakai 的依賴項，需要將其新增至 package.json 中。

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

PrimeVue 主題

Sakai 使用 PrimeVue 中分佈的免費 Saga、Arya 和 Vela 主題，但它也可以與任何 PrimeVue 主題一起使用，例如 Material、Tailwind 和 Bootstrap，因為佈局顏色是透過 CSS 變數從使用的主題派生的。

SASS 變數

如果您想自訂佈局變量，請開啟 src/layout 資料夾下的_variables.scss檔。此列表非常短，因為大多數變數都源自於所使用的 PrimeVue 主題。

src/assets/_variables.scss

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