sakai vue cli

Plantilla de administración de Sakai para Vue

Vista previa en vivo

Visite el sitio web de Sakai Vue para obtener una vista previa en vivo.

Empezando

Sakai es una plantilla de aplicación para Vue basada en Vue CLI que proporciona herramientas estándar listas para usar para proyectos de Vue. Para comenzar, clona este repositorio desde GitHub e instala las dependencias con npm o Yarn.

 npm install

o

 yarn

El siguiente paso es ejecutar la aplicación utilizando el script de servicio y navegar a http://localhost:8080/ para ver la aplicación. Eso es todo, ahora puedes comenzar con el desarrollo de tu aplicación utilizando la plantilla Sakai.

 npm run serve

Secuencias de comandos de Vue CLI

Los siguientes comandos se derivan 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.

Estructura

Sakai consta de 2 partes principales; el diseño de la aplicación y los recursos. App.vue dentro de la carpeta src es el componente principal que contiene la plantilla para el diseño base, mientras que los recursos necesarios, como la estructura SASS para el diseño, se colocan dentro de la carpeta src/assets/ .

Componentes de diseño

El diseño principal es la plantilla de App.vue , está dividido en un par de componentes secundarios, como la barra superior, el menú y el pie de página. Aquí hay una plantilla del componente App.vue que implementa la lógica, como el estado del menú, los modos de diseño, etc.

Menú

El menú es un componente independiente definido en el archivo AppMenu.vue basado en la API PrimeVue MenuModel. Para definir los elementos del menú, navegue a la sección de datos del archivo App.vue y defina su propio modelo como una estructura anidada usando la propiedad del menú .

Dependencias

Las dependencias de Sakai se enumeran a continuación y deben agregarse a package.json.

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

Tema PrimeVue

Sakai usa los temas gratuitos Saga, Arya y Vela que se distribuyen dentro de PrimeVue, sin embargo, se puede usar con cualquier tema PrimeVue, como material, tailwind y bootstrap, ya que los colores del diseño se derivan del tema usado a través de variables CSS.

Variables SASS

En caso de que desee personalizar las variables de diseño, abra el archivo _variables.scss en la carpeta src/layout. La lista es bastante corta ya que la mayoría de las variables se derivan del tema PrimeVue que se utiliza.

src/assets/_variables.scss

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