sakai vue cli

Modelo de administração Sakai para Vue

Visualização ao vivo

Visite o site Sakai Vue para uma prévia ao vivo.

Começando

Sakai é um modelo de aplicativo para Vue baseado na CLI do Vue que fornece ferramentas padrão prontas para uso para projetos Vue. Para começar, clone este repositório do GitHub e instale as dependências com npm ou yarn.

 npm install

ou

 yarn

A próxima etapa é executar o aplicativo usando o script serve e navegar até http://localhost:8080/ para visualizar o aplicativo. É isso, agora você pode começar o desenvolvimento de sua aplicação utilizando o template Sakai.

 npm run serve

Scripts CLI Vue

Os comandos a seguir são derivados de 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.

Estrutura

Sakai consiste em 2 partes principais; o layout do aplicativo e os recursos. App.vue dentro da pasta src é o componente principal que contém o modelo para o layout base, enquanto os recursos necessários, como a estrutura SASS para o layout, são colocados dentro da pasta src/assets/ .

Componentes de layout

O layout principal é o modelo do App.vue , ele é dividido em alguns componentes filhos, como barra superior, menu e rodapé. Aqui está o modelo do componente App.vue que implementa a lógica, como estado do menu, modos de layout e assim por diante.

Menu

Menu é um componente separado definido no arquivo AppMenu.vue baseado na API PrimeVue MenuModel. Para definir os itens de menu, navegue até a seção de dados do arquivo App.vue e defina seu próprio modelo como uma estrutura aninhada usando a propriedade de menu .

Dependências

As dependências do Sakai estão listadas abaixo e precisam ser adicionadas ao package.json.

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

Tema PrimeVue

Sakai usa os temas gratuitos Saga, Arya e Vela que são distribuídos no PrimeVue, porém pode ser usado com qualquer tema PrimeVue, como material, tailwind e bootstrap, já que as cores do layout são derivadas do tema usado por meio de variáveis ​​CSS.

Variáveis ​​SASS

Caso queira customizar as variáveis ​​de layout, abra o arquivo _variables.scss na pasta src/layout. A lista é bem curta, pois a maioria das variáveis ​​​​deriva do tema PrimeVue usado.

src/assets/_variables.scss

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