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;