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.
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:
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.
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:
Al visitar la URL en el navegador veremos nuestra app:
Si quieres “compilar” tu proyecto ejecuta npm run build
. Para detener el servidor simplemente presiona CTRL + C
en la consola.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios