Cómo usar Bulma y VueJS juntos

es un marco CSS gratuito y de código abierto basado en y utilizado por más de 000 desarrolladores. Es el más fácil de aprender (en mi opinión) debido a su nomenclatura natural de clases y un sistema de cuadrícula simple. No es tan popular como Bootstrap, pero tiene una base de fans específica. Bulma Flexbox 200 La publicación de hoy no trata sobre los beneficios o el uso de Bulma. Se trata más específicamente de la integración de Bulma y VueJS. Cómo usar Bulma con VueJS Hay varias formas de con Bulma. Tu también puedes: empezar use para instalar el paquete Bulma (Recomendado - Personalizable) npm use para vincular a la hoja de estilo de Bulma (no se puede personalizar) jsDelivr CDN 1. Integración Bulma usando npm Es mi recomendación personal usar Bulma en VueJS de esta manera, debido a algunos beneficios que no obtendrá de otra manera. Puede personalizar los colores, los puntos de interrupción, el tipo y las importaciones personalizadas para reducir el tamaño del archivo. Esto solo es posible si configuramos un flujo de trabajo Sass en nuestro proyecto, debido a la naturaleza de Bulma. Así que, aquí vamos: Instalando Bulma Instale estas dependencias requeridas (si ya no existe en su proyecto): npm install --save-dev node-sass sass-loader También puede leer esta al respecto si no lo entiende o desea una instalación más detallada. publicación detallada Instale Bulma a través de npm/yarn: npm install bulma Ahora puede revisar su para ver los cambios. package.json Agregando al proyecto Es muy obstinado importar a Bulma al proyecto, pero de esta manera funciona mejor para mí: Cree un main.scss en la carpeta /assets. En este archivo `main.scss` pega este código: @ ; // Customizations Here (Optional) // Bulma Import import '~bulma' Agregue este archivo en main.js de su proyecto de esta manera: ( ); require '@/assets/main.scss' Estás bien, ahora. Simplemente inicie el servidor de desarrollo local y verifique que Bulma esté trabajando en su sitio web. 2. use jsDelivr CDN para vincular a la hoja de estilo de Bulma (no se puede personalizar) Esta es la forma más fácil de integrar Bulma en su proyecto (Vue o HTML/CSS), pero no podrá nada de esta manera. Obtendrás una versión completa de Bulma. personalizar Entonces, así es como puede agregar a través de CDN: Copie esto, o recupere la : última versión de Bulma de JSDelivr "https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" Ve al directorio /public y pega esto en index.html Reinicie el servidor de desarrollo local y comience a usar Bulma 🙌. Personalización (Bonificación) Este es el capítulo adicional de esta publicación, donde mencionaré brevemente los efectos de la personalización en Bulma y cómo puedes personalizarla. Bulma está escrita de forma nativa en Sass, por lo que necesita un flujo de trabajo de Sass para personalizarlo usando Variables, lo cual solo es posible si está usando npm Personalización básica @charset ; @ url( ); $purple: # A4D76; $pink: #FA7C91; $brown: # ; $beige-light: #D0D1CD; $beige-lighter: #EFF0EB; $family-sans-serif: , sans-serif; $grey-dark: $brown; $grey-light: $beige-light; $primary: $purple; $link: $pink; $widescreen-enabled: ; $fullhd-enabled: ; $body-background-color: $beige-lighter; $control-border-width: px; $input-border-color: transparent; $input-shadow: none; @ ; @ ; @ ; @ ; @ ; @ ; @ ; @ ; @ ; "utf-8" // Import a Google Font import 'https://fonts.googleapis.com/css?family=Nunito:400,700' // Set your brand colors 8 757763 // Update Bulma's global variables "Nunito" false false // Update some of Bulma's component variables 2 // Import only what you need from Bulma import "../node_modules/bulma/sass/utilities/_all.sass" import "../node_modules/bulma/sass/base/_all.sass" import "../node_modules/bulma/sass/elements/button.sass" import "../node_modules/bulma/sass/elements/container.sass" import "../node_modules/bulma/sass/elements/title.sass" import "../node_modules/bulma/sass/form/_all.sass" import "../node_modules/bulma/sass/components/navbar.sass" import "../node_modules/bulma/sass/layout/hero.sass" import "../node_modules/bulma/sass/layout/section.sass" : resultado Esto es todo, y ¡voilà! Has logrado instalar y personalizar Bulma. Gracias por leer este post, si te gustó, compártelo en Twitter y etiquétame. No olvides seguirme allí. Publicado anteriormente en https://justaashir.com/blog/bulma-vue-js-installation/