Rodney Vg

Rodney Vg

1559271960

Instalar Bootstrap 4 + Sass en Vue

Instalar Bootstrap 4 + Sass en Vue

En este tutorial rápido aprenderemos como instalar Bootstrap y utilizar la linea de comandos de Vue para habilitar el soporte Sass para aprovechar al máximo la configuración del framework. Unicamente vamos a utilizar los estilos de Bootstrap, no tocaremos temas como jQuery o librerías externas.

Comencemos instalando la linea de comandos de vue:

npm install -g @vue/cli

En caso de que ya tuvieras instalada en tu equipo la linea de comandos (muy bien por ti! 👏) te recomiendo que la reinstales para asegurarte que usas la versión mas reciente, en este ejemplo usaremos la versión 3.6.2, puedes encontrar la versión que usa tu ordenador con el comando:

vue --version

El siguiente paso es crear un nuevo proyecto Vue con el comando

vue create vue-bootstrap

Pero en este caso, en vez de usar la configuración por defecto, usaremos la opción manual para habilitar Sass, si no sabes como hacerlo, mira las opciones que debes elegir en la terminal:

Al finalizar el proceso, la linea de comandos de Vue ha configurado el soporte para Sass, a partir de ahora, se compilará y agregará al proyecto automáticamente.

Ahora vamos a instalar Bootstrap en este proyecto, para eso tenemos que ejecutar:

npm install bootstrap --save

Después de terminar la instalación tienes que buscar el punto de entrada de la aplicación, que en este caso seria el archivo App.vue, busca la sección style del documento e importa los estilos de Bootstrap asi:

<style lang="scss">
@import '../node_modules/bootstrap/scss/bootstrap.scss';
</style>

Si te fijas bien en esta etiqueta, estamos usando el atributo lang=”scss” para informarle al compilador de Vue que esa sección debe ser interpretada bajo la sintaxis de Sass, recuerda incluirla en todos tus componentes.

La mejor parte de usar Sass, ( ademas de que tienes un CSS optimizado gracias a la compilación) es que puedes aprovechar elementos extra como por ejemplo el concepto de variables!

Supongamos que quieres adaptar algunos colores para que se ajusten a la paleta cromática de tu cliente, puedes crear una subcarpeta llamada “styles” dentro de la carpeta “src” de tu proyecto y alli incluir un archivo con el nombre “custom.scss”.

En este archivo vamos a reescribir los valores variables de color y tipografías que usa bootstrap y gracias a que estamos compilando el CSS con Sass, estos valores se actualizarán en todo el documento

// importa tipografía desde google fonts
@import url("https://fonts.googleapis.com/css?family=PT+Sans");

// asigna la tipografía por defecto
$font-family-sans-serif: "PT Sans", sans-serif;

// modifica los colores por defecto
$green: #41b883;
$red: #ce679b;
$blue: #7952b3;

Y para que estos cambios sean visibles en la aplicación, tienes que importar el documento en en la sección style de app.vue

<style lang="scss">
   @import "./styles/custom.scss";
   @import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

Si quieres aprender más sobre las variables de configuración de Bootstrap, puedes darle una ojeada a la documentación

En este momento ya tienes Bootstrap con soporte Sass en tu aplicación, pero para poder apreciar los cambios, vamos a modificar el archivo App.vue para que su plantilla tenga un HTML con las clases que acabamos de importar, el resultado final del archivo debería ser este:

<template>
  <div id="app" class="container">
    <main role="main">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3">Bootstrap + Vue + Sass</h1>
          <p>
            <a
              class="btn btn-success btn-lg"
              href="http://vuejs.org"
              role="button"
            >Documentación Vue</a>
          </p>
          <p>
            <a
              class="btn btn-danger btn-lg"
              href="https://sass-lang.com"
              role="button"
            >Documentación Sass</a>
          </p>
          <p>
            <a
              class="btn btn-primary btn-lg"
              href="https://getbootstrap.com"
              role="button"
            >Documentación Bootstrap</a>
          </p>
        </div>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h2>Sección 1</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p>
              <a class="btn btn-secondary" href="#" role="button">Botón »</a>
            </p>
          </div>
          <div class="col-md-4">
            <h2>Sección 2</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p>
              <a class="btn btn-secondary" href="#" role="button">Botón »</a>
            </p>
          </div>
          <div class="col-md-4">
            <h2>Sección 3</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p>
              <a class="btn btn-secondary" href="#" role="button">Botón »</a>
            </p>
          </div>
        </div>

        <hr>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {}
};
</script>

<style lang="scss">
@import "./styles/custom.scss";
@import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

App.vue

Ahora, solo tienes que activar el servidor local de vue para ver el resultado usando

npm run serve

Si todo sale bien deberías ver este documento, con un layout responsivo basado en Bootstrap 4, si notas los colores de los botones, están usando la configuración personalizada y ahora se ajustan a la paleta oficial de cada framework usado

Si tienes algún problema para hacer funcionar tu proyecto, puedes usar como base este repositorio de github donde puse los archivos que usamos como ejemplo.

30s ad

Vue.js Essentials - 3 Course Bundle

Sıfırdan İleri Seviye Vue.JS Eğitimi ve Uygulama Geliştirme

Vue.js 2 Basics in just 1 hour FREE

Programador FullStack JS Vue Node: Proj Galeria Vídeo e CRUD

Learn by Doing: Vue JS 2.0 the Right Way

#vue-js #javascript #bootstrap

What is GEEK

Buddha Community

Instalar Bootstrap 4 + Sass en Vue
Luna  Mosciski

Luna Mosciski

1600583123

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Rodney Vg

Rodney Vg

1559271960

Instalar Bootstrap 4 + Sass en Vue

Instalar Bootstrap 4 + Sass en Vue

En este tutorial rápido aprenderemos como instalar Bootstrap y utilizar la linea de comandos de Vue para habilitar el soporte Sass para aprovechar al máximo la configuración del framework. Unicamente vamos a utilizar los estilos de Bootstrap, no tocaremos temas como jQuery o librerías externas.

Comencemos instalando la linea de comandos de vue:

npm install -g @vue/cli

En caso de que ya tuvieras instalada en tu equipo la linea de comandos (muy bien por ti! 👏) te recomiendo que la reinstales para asegurarte que usas la versión mas reciente, en este ejemplo usaremos la versión 3.6.2, puedes encontrar la versión que usa tu ordenador con el comando:

vue --version

El siguiente paso es crear un nuevo proyecto Vue con el comando

vue create vue-bootstrap

Pero en este caso, en vez de usar la configuración por defecto, usaremos la opción manual para habilitar Sass, si no sabes como hacerlo, mira las opciones que debes elegir en la terminal:

Al finalizar el proceso, la linea de comandos de Vue ha configurado el soporte para Sass, a partir de ahora, se compilará y agregará al proyecto automáticamente.

Ahora vamos a instalar Bootstrap en este proyecto, para eso tenemos que ejecutar:

npm install bootstrap --save

Después de terminar la instalación tienes que buscar el punto de entrada de la aplicación, que en este caso seria el archivo App.vue, busca la sección style del documento e importa los estilos de Bootstrap asi:

<style lang="scss">
@import '../node_modules/bootstrap/scss/bootstrap.scss';
</style>

Si te fijas bien en esta etiqueta, estamos usando el atributo lang=”scss” para informarle al compilador de Vue que esa sección debe ser interpretada bajo la sintaxis de Sass, recuerda incluirla en todos tus componentes.

La mejor parte de usar Sass, ( ademas de que tienes un CSS optimizado gracias a la compilación) es que puedes aprovechar elementos extra como por ejemplo el concepto de variables!

Supongamos que quieres adaptar algunos colores para que se ajusten a la paleta cromática de tu cliente, puedes crear una subcarpeta llamada “styles” dentro de la carpeta “src” de tu proyecto y alli incluir un archivo con el nombre “custom.scss”.

En este archivo vamos a reescribir los valores variables de color y tipografías que usa bootstrap y gracias a que estamos compilando el CSS con Sass, estos valores se actualizarán en todo el documento

// importa tipografía desde google fonts
@import url("https://fonts.googleapis.com/css?family=PT+Sans");

// asigna la tipografía por defecto
$font-family-sans-serif: "PT Sans", sans-serif;

// modifica los colores por defecto
$green: #41b883;
$red: #ce679b;
$blue: #7952b3;

Y para que estos cambios sean visibles en la aplicación, tienes que importar el documento en en la sección style de app.vue

<style lang="scss">
   @import "./styles/custom.scss";
   @import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

Si quieres aprender más sobre las variables de configuración de Bootstrap, puedes darle una ojeada a la documentación

En este momento ya tienes Bootstrap con soporte Sass en tu aplicación, pero para poder apreciar los cambios, vamos a modificar el archivo App.vue para que su plantilla tenga un HTML con las clases que acabamos de importar, el resultado final del archivo debería ser este:

<template>
  <div id="app" class="container">
    <main role="main">
      <div class="jumbotron">
        <div class="container">
          <h1 class="display-3">Bootstrap + Vue + Sass</h1>
          <p>
            <a
              class="btn btn-success btn-lg"
              href="http://vuejs.org"
              role="button"
            >Documentación Vue</a>
          </p>
          <p>
            <a
              class="btn btn-danger btn-lg"
              href="https://sass-lang.com"
              role="button"
            >Documentación Sass</a>
          </p>
          <p>
            <a
              class="btn btn-primary btn-lg"
              href="https://getbootstrap.com"
              role="button"
            >Documentación Bootstrap</a>
          </p>
        </div>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h2>Sección 1</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p>
              <a class="btn btn-secondary" href="#" role="button">Botón »</a>
            </p>
          </div>
          <div class="col-md-4">
            <h2>Sección 2</h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
            <p>
              <a class="btn btn-secondary" href="#" role="button">Botón »</a>
            </p>
          </div>
          <div class="col-md-4">
            <h2>Sección 3</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            <p>
              <a class="btn btn-secondary" href="#" role="button">Botón »</a>
            </p>
          </div>
        </div>

        <hr>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {}
};
</script>

<style lang="scss">
@import "./styles/custom.scss";
@import "../node_modules/bootstrap/scss/bootstrap.scss";
</style>

App.vue

Ahora, solo tienes que activar el servidor local de vue para ver el resultado usando

npm run serve

Si todo sale bien deberías ver este documento, con un layout responsivo basado en Bootstrap 4, si notas los colores de los botones, están usando la configuración personalizada y ahora se ajustan a la paleta oficial de cada framework usado

Si tienes algún problema para hacer funcionar tu proyecto, puedes usar como base este repositorio de github donde puse los archivos que usamos como ejemplo.

30s ad

Vue.js Essentials - 3 Course Bundle

Sıfırdan İleri Seviye Vue.JS Eğitimi ve Uygulama Geliştirme

Vue.js 2 Basics in just 1 hour FREE

Programador FullStack JS Vue Node: Proj Galeria Vídeo e CRUD

Learn by Doing: Vue JS 2.0 the Right Way

#vue-js #javascript #bootstrap

Build a Bootstrap 4 & Vue App

Bootstrap 4 continues to be the most popular framework for creating web apps. It’s a shame that the jQuery dependency makes it less powerful than it could be!

Fortunately, it’s fairly easy to swap jQuery for Vue to make a far simpler and more flexible development experience.

In this tutorial, I’ll show you how easy it is to set up a Bootstrap 4 project with Vue. To do this, we’ll be using Bootstrap-Vue, Vue CLI, and Vue 2.6. I’ll assume you already know the basics of both Bootstrap and Vue.

Setting up a Bootstrap and Vue project

The Bootstrap-Vue project has done most of the heavy lifting of replacing jQuery with Vue by implementing Bootstrap features as Vue components.

Rather than installing it directly, we can use Bootstrap-Vue as a Vue CLI plugin. This takes care of any configuration boilerplate and will automatically add any dependencies so I highly recommend this approach.

Let’s create a new Vue CLI project:

$ vue create bootstrap-vue-app

Note that you will need to have Vue CLI installed in your dev environment already (instructions here).

Vue CLI will now take you through the Vue app setup. If you aren’t sure what options to choose, just select “default”.

Now, change into your new project directory:

$ cd bootstrap-vue-app

You can now add the Bootstrap-Vue plugin to your project. Unless you have reasons otherwise, I suggest you select “Y” for any prompts.

$ vue add bootstrap-vue

Thanks to the magic of Vue CLI, you have now set up a best-practice Vue & Bootstrap project with no configuration required!

Clearing out boilerplate

By default, Vue CLI provides a boilerplate app for you to begin with. Let’s clear the content of App.vue as we’ll still need that file, but we can delete HelloWorld.vue all together.

$ > src/components/App.vue
$ rm src/components/HelloWorld.vue

Bootstrap-Vue components

Almost all of the features of Bootstrap are available as globally registered components in Bootstrap-Vue.

These generally have the same names as the Bootstrap components, but to distinguish them from other components, they’re prefixed with b-.

For example, let’s create a new template in App.vue and add a Bootstrap container. This is packaged in the component b-container.

<template>
  <b-container>
    <p>Hello, Bootstrap-Vue</p>
  </b-container>
</template>

Let’s now serve the app we’ve created

$ npm run serve

#vue.js #bootstrap #vue #programming

How to using Bootstrap 5 with Sass and Gulp 4 by Example

The most popular Bootstrap CSS and JavaScript framework for styling user interfaces is coming with a new version — Bootstrap 5. In this tutorial, we will learn how to use the latest Bootstrap 5 version with Gulp 4 and Sass to style and build a responsive mobile-first example app.

We’ll use JavaScript to fetch data from a JSON endpoint that exports the latest posts from Techiediaries.

Bootstrap is the most popular and widely used, among developers worldwide, open-source framework for building responsive UIs with HTML, CSS, and JavaScript. At this time, Bootstrap 4 is the major production release of bootstrap but soon we’ll have a Bootstrap 5 version that will bring many major changes and most importantly removing jQuery as a dependency, and dropping support for IE 10 and 11.

#bootstrap #bootstrap-5 #gulp #sass

Vincent Lab

Vincent Lab

1605024026

Bootstrap Tutorial 2020 - Getting Started

In this video, I’ll be showing you how to quickly get started with Bootstrap.

#bootstrap tutorial #introduction #bootstrap 4 #bootstrap #bootstrap tutorial for beginners step by step #getting started