Buefy

Crear proyecto de Buefy (Bulma CSS + Vue) usando la CLI de Vue

En este post voy a poner las instrucciones para comenzar un proyecto con Buefy.

Buefy es la combinación de Vue y Bulma CSS, ofrece componentes de Bulma CSS pero mejorados con el buen Vue.

Vamos a utilizar NPM con la CLI de Vue (vue-cli), ya que será un proyecto un tanto formal.

Comenzar proyecto de Buefy

Comienza instalando NPM o actualizando a la última versión. Ahora instala la CLI de Vue con:

npm install -g @vue/cli

Después de eso dirígete a la carpeta en donde vas a crear tu proyecto.

Si la carpeta del proyecto no existe (es decir, vas a crearlo desde cero) escribe:

vue create nombre_de_carpeta_de_proyecto

Si la carpeta del proyecto ya existe navega hasta estar dentro de ella y escribe:

vue create .

En el último caso te pedirá confirmación para que se instale en el directorio actual.

Después de eso preguntará cuál “preset” queremos, elegimos el que está por defecto: babel y eslint.

Sin importar lo que hayas elegido, ahora navega en la terminal hasta la carpeta de tu proyecto, la cual tendrá una estructura como la imagen de abajo.

Con todo lo ejecutado arriba ahora tendremos una estructura como la siguiente, excepto por la carpeta “api” que es mía:

Estructura de proyecto creada con vue cli

Ahora procedemos a instalar buefy con:

npm install --save buefy

Finalmente y solo como referencia, el package.json debería verse así:

{
  "name": "control_escolar",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "buefy": "^0.7.6",
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.4",
    "@vue/cli-plugin-eslint": "^3.0.4",
    "@vue/cli-service": "^3.0.4",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Hemos terminado de instalar las dependencias. Es momento de probar.

Bulma + Vue = Buefy

En el archivo main.js importamos a Buefy y también a su CSS.

import Buefy from 'buefy'

import 'buefy/dist/buefy.css'

Después de ello le indicamos a Vue que utilice los componentes de Buefy

Vue.use(Buefy);

De nuevo, solo como referencia aquí dejo mi archivo main.js:

import Vue from 'vue'
import App from './App.vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy);
Vue.config.productionTip = false

new Vue({
    render: h => h(App),
}).$mount('#app')

Opcionalmente en el archivo index.html agregamos la clase “section” al div con el id app.

Ahora modificamos el archivo App.vue para probar algunos componentes de Buefy de manera que quede así:

<template>
    <div class="container">
      <div class="columns">
        <div class="column">
          <section>
            <h1 class="is-size-1">Probando Buefy</h1>
            <button class="button is-medium" @click="mostrarToast">
                Mostrar un toast
            </button>
          </section>
        </div>
      </div>
    </div>
</template>

<script>

export default {
  name: 'app',
  methods: {
    mostrarToast(){
      this.$buefy.toast.open("¡Hola, Buefy! Parzibyte.me")
    }
  }
}
</script>

En la consola escribimos:

npm run serve

Tardará un poco y al finalizar tendremos un servidor sirviendo nuestra app. La misma consola mostrará la IP y el puerto:

Ejecutar npm run serve para servir app de Vue

Al visitar la URL en el navegador veremos nuestra app:

Aplicación de Vue con Bulma CSS usando Buefy

Si quieres “compilar” tu proyecto ejecuta npm run build. Para detener el servidor simplemente presiona CTRL + C en la consola.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 min hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

14 horas hace

JavaScript – Dividir texto en varias líneas con espacio

Hoy te voy a enseñar a agregar un salto de línea a un texto para…

4 semanas hace

Emitir sonido y parpadear LED en impresora térmica

Algunas impresoras térmicas ESC POS tienen un buzzer o zumbador que puede emitir sonidos, también…

1 mes hace

Tailwind CSS – Centrar verticalmente

En este corto tutorial de programación CSS con Tailwind vamos a ver cómo centrar un…

1 mes hace

Cámara a impresora térmica – Aplicación web

Hoy te voy a enseñar una aplicación web (programada con JavaScript en el lado del…

1 mes hace

Esta web usa cookies.