sakai vue cli

Шаблон администратора Sakai для Vue

Живой просмотр

Посетите веб-сайт 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.

Структура

Сакаи состоит из двух основных частей; макет приложения и ресурсы. App.vue внутри папки src — это основной компонент, содержащий шаблон базового макета, тогда как необходимые ресурсы, такие как структура SASS для макета, размещаются внутри папки src/assets/ .

Компоненты макета

Основной макет — это шаблон App.vue , он разделен на пару дочерних компонентов, таких как верхняя панель, меню и нижний колонтитул. Вот шаблон компонента App.vue , который реализует такую ​​логику, как состояние меню, режимы макета и т. д.

Меню

Меню — это отдельный компонент, определенный в файле AppMenu.vue на основе API PrimeVue MenuModel. Чтобы определить элементы меню, перейдите к разделу данных файла App.vue и определите свою собственную модель как вложенную структуру, используя свойство меню .

Зависимости

Зависимости Sakai перечислены ниже, и их необходимо добавить в package.json.

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

Тема PrimeVue

Sakai использует бесплатные темы Saga, Arya и Vela, которые распространяются в рамках PrimeVue, однако их можно использовать с любой темой PrimeVue, например с материалом, попутным ветром и начальной загрузкой, поскольку цвета макета извлекаются из темы, используемой через переменные CSS.

Переменные SASS

Если вы хотите настроить переменные макета, откройте файл _variables.scss в папке src/layout. Список довольно короткий, поскольку большинство переменных взяты из используемой темы PrimeVue.

src/assets/_variables.scss

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