Sviluppo fullstack con AdonisJS parte 3: Configurare NaiveUI
venerdì, 07 ottobre 2022
Come installare la libreria di componenti NaiveUI
Foto di Pavel Nekoranec su Unsplash
Premessa
Questo articolo fa parte di una serie che illustra come costruire un’applicazione con AdonisJS e VueJS. Se ti fossi perso la prima parte inizia da qui.
Introduzione
In questa sezione installeremo una libreria che fornisca un insieme di componenti pronti all’uso che velocizzeranno tantissimo la fase di design al netto di qualche piccola personalizzazione.
Perché NaiveUI
Esistono diverse librerie che assolvono allo scopo di fornire un sistema di componenti riutilizzabili; tra i tanti consiglio questi:
- BootstrapVue con il solidissimo Bootstrap
- Vuetify basato sul popolare Material Design
- Buefy che utilizza il moderno Bulma
- Quasar ottima per creare applicazioni multi-piattaforma (web, mobile, desktop, …) ma più complessa da integrare in un progetto Adonis
Molte di queste librerie non supportano ancora la versione 3 di VueJS, per questo ho deciso di avventurarmi in una nuova libreria: NaiveUI. Questo tipo di librerie in genere è molto semplice da utilizzare, basta sfogliare velocemente la documentazione per capirne il funzionamento, sentitevi quindi liberi di sostituire NaiveUI con quella che più vi piace.
Installazione della libreria
Installiamo NaiveUI da npm:
npm i -D naive-uiE proviamo subito ad importare un componente di prova in Home, per esempio un bottone:
<script>
import { NButton } from 'naive-ui'
export default {
name: 'Home',
components: {
NButton,
},
}
</script>
<template>
<h1>Home</h1>
<n-button type="primary">button</n-button>
</template>Personalizzare il tema
Applichiamo ora una personalizzazione base del tema cambiando il colore primario:
<!-- App.js -->
<script>
import { NConfigProvider } from 'naive-ui'
/**
* Use this for type hints under js file
* @type import('naive-ui').GlobalThemeOverrides
*/
const themeOverrides = {
common: {
primaryColor: '#f54646',
primaryColorHover: '#f52929',
},
}
export default {
name: 'App',
components: { NConfigProvider },
setup() {
return {
themeOverrides,
}
},
}
</script>
<template>
<n-config-provider :theme-overrides="themeOverrides">
<hr />
<router-link to="/">Home</router-link> | <router-link to="/about">About</router-link>
<hr />
<router-view></router-view>
</n-config-provider>
</template>Abbiamo dichiarato una costante themeOverrides che conterrà tutte le nostre personalizzazioni. La inseriamo nello scope del componente tramite l’istruzione setup che ritorna lo state del componente e infine introduciamo NConfigProvider all’esterno di tutti i nostri componenti in modo che possano ereditare le istruzioni di personalizzazione.
Ora il nostro bottone dovrebbe risultare di un bel rosso acceso.
Font e icone
Per praticità installiamo anche due librerie consigliate per personalizzare font e icone:
npm i -D vfonts @vicons/carbonVFonts mette a disposizioni alcuni font tra i più popolari mentre xicons permette di installare diversi set di icone anche per altri framework diversi da Vue.
Importiamo uno dei font di vfonts in app.js:
// app.js
// ...
import 'vfonts/Inter.css'
// ...Eliminiamo anche il contenuto di app.css per evitare che entri in conflitto con le nostre configurazioni.
Layout principale
Utilizzando i componenti di Naive impostiamo un layout base condiviso da tutta l’applicazione modificando App.vue:
<script>
import { defineComponent } from 'vue'
import {
NConfigProvider,
NSpace,
NLayout,
NLayoutHeader,
NLayoutContent,
NLayoutSider,
} from 'naive-ui'
import Navbar from './Navbar.vue'
/**
* Use this for type hints under js file
* @type import('naive-ui').GlobalThemeOverrides
*/
const themeOverrides = {
common: {
primaryColor: '#f54646',
primaryColorHover: '#f52929',
},
}
export default defineComponent({
components: {
NSpace,
Navbar,
NConfigProvider,
NLayout,
NLayoutHeader,
NLayoutContent,
NLayoutSider,
},
setup() {
return {
themeOverrides,
}
},
})
</script>
<template>
<n-config-provider :theme-overrides="themeOverrides">
<n-space vertical size="large">
<n-layout>
<n-layout-header bordered>
<navbar />
</n-layout-header>
<n-layout has-sider>
<n-layout-sider
collapse-mode="transform"
show-trigger="arrow-circle"
content-style="padding: 24px;"
bordered
collapsed
>
<p>Sidebar</p>
</n-layout-sider>
<n-layout-content content-style="padding: 24px;"
><router-view></router-view
></n-layout-content>
</n-layout>
</n-layout>
</n-space>
</n-config-provider>
</template>Creiamo quindi il file components/Navbar.vue che conterrà la nostra barra di navigazione:
<!-- components/Navbar.vue -->
<script>
import { defineComponent, h, ref } from 'vue'
import { NButton, NMenu, NIcon } from 'naive-ui'
import { RouterLink } from 'vue-router'
import { Information as WorkIcon, Home as HomeIcon } from '@vicons/carbon'
function renderIcon(icon) {
return () => h(NIcon, null, { default: () => h(icon) })
}
const menuOptions = [
{
label: () =>
h(
RouterLink,
{
class: 'logo',
to: {
name: 'home',
},
},
{ default: () => 'My Manager' }
),
key: 'logo',
},
{
label: () =>
h(
RouterLink,
{
to: {
name: 'home',
},
},
{ default: () => 'Go Home' }
),
key: 'home',
icon: renderIcon(HomeIcon),
},
{
label: () =>
h(
RouterLink,
{
to: {
path: '/about',
},
},
{ default: () => 'About' }
),
key: 'about',
icon: renderIcon(WorkIcon),
},
]
export default {
name: 'Navbar',
components: {
NButton,
NMenu,
},
setup() {
return {
activeKey: ref(null),
menuOptions,
}
},
}
</script>
<template>
<n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
</template>Attivazione di SASS
Per personalizzare puntuali attiveremo SASS che ci permetterà di scrivere regole CSS con un approccio più pratico e vicino alla normale programmazione.
Installiamo un paio di librerie:
npm install sass-loader@^12.0.0 sass --save-devRiprendiamo il file webpack.config.js e attiviamo le seguenti configurazioni togliendo l’istruzione di commento all’inizio della riga:
// webpack.config.js
// ...
Encore.enableSassLoader()
// ...Possiamo verificare il funzionamento aggiungendo un tag style infondo alla pagina Home.vue:
<!-- Home.vue -->
<!-- ... -->
<style lang="scss" scoped>
h1 {
text-align: center;
}
</style>La proprietà scoped fa sì che le regole inserite all’interno del tag valgano solo per il componente corrente e non influiscano su altri componenti.
Potete trovare tutte le modifiche sotto il branch “naive-ui” a questo commit: https://github.com/marco-mazzocchi/adonis-vue-boilerplate/tree/81059982eca7f034c586b8bb60854b2bd2fb0cb0
Il prossimo passo
Nel prossimo articolo ci avventureremo nelle funzionalità base della nostra applicazione e imposteremo un sistema di autenticazione che ci permetterà di proteggere i contenuti dell’applicazione.
