How to integrate CSS framework in Vue? Method introduction

The following Vue.js Tutorial column will introduce to you how to integrate the CSS framework in Vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#CSS frameworks are great for many reasons: for example, the code is easier to understand, web applications are easier to maintain, and it simplifies the steps when implementing prototypes. Generally speaking, the method of integrating CSS frameworks in VUE is the same. This article takes the widely used Bootstrap 4 as an example.

Preparation

Before downloading the CSS framework, first create a new project with Vue CLI:

npm install vue-cli
vue init webpack project-name

Install and integrate Bootstrap 4

After creating and initializing the new Vue project, use npm to download Bootstrap 4. Since Bootstrap 4's JavaScript depends on jQuery, jQuery also needs to be installed.

npm install bootstrap jquery --save

You need to add the Bootstrap dependency in your Vue's main.js file so that it can be used globally throughout the entire program.

import './../node_modules/jquery/dist/jquery.min.js';
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

If your application fails to build, you should install the popper.js dependency. There should be no errors after that.

npm install --save popper.js

In this way, Bootstrap 4 is integrated into Vue.

Install and integrate Bulma

Bulma is a lightweight and flexible CSS framework based on Flexbox. It has more than 25K stars on GitHub.

Unlike Bootstrap, Bulma only contains CSS and has no dependencies on jQuery or JavaScript.

Installing Bulma:

npm install bulma

After downloading Bulma, open your main.js and import it.

/* main.js */
import './../node_modules/bulma/css/bulma.css';

In this way, Bulma is integrated into your Vue.js program.

Install and integrate Foundation

Foundation is an excellent CSS framework. It has two frames: one for email and one for website. What we need is the Foundation Sites framework, since we are only interested in using Foundation in the web.

Install Foundation Sites and import it into your main.js file:

$ npm install foundation-sites --save

Import it into your main.js In the document:

/* main.js */
import './../node_modules/foundation-sites/dist/css/foundation.min.css';
import './../node_modules/foundation-sites/dist/js/foundation.min.js';

Best Practices in Vue

The above three frameworks are very similar: they are all based on rows and columns. Creates a "grid" that you can use to create user interfaces. Grids make it easy to change the width of a column based on the device width simply by adding or changing the class attached to the element.

Note: The following example uses Bootstrap4. But this approach based on row and column frameworks applies to all CSS frameworks.

It is best to use framework classes whenever possible. For ease of use, these frameworks are carefully designed to be extendable and customizable. Instead of creating your own button with your own class, you can use Bootstrap, Bulma, or Foundation to do the same thing.

<!-- Bootstrap -->
<button class="btn btn-primary btn-lg">Bootstrap 大按钮</button>

<!-- Bulma -->
<button class="button is-primary is-large">Bulma 大按钮</button>

You can configure each color so that btn-primary (Bootstrap) or is-primary (Bulma) refer to the color of your own style instead of using Default colors shipped with Bootstrap and Bulma.

If you need to create your own theme with your own styles, you can create a global style sheet that overrides the framework's global styles; because we don't want to modify the framework directly.

Create your own style

If you want to create your own CSS theme, you need to create a new CSS file first and put it in in the assets directory, and then import it into the App.vue file.

/* App.vue */
import '@/assets/styles.css';
...

Try to map some default styles that match your own to Bootstrap components:

/* styles.css */
/* Buttons
--------------------------- */
.btn-primary   { background: #00462e; color: #fff; } /* dark green */
.btn-secondary { background: #a1b11a; color: #fff; } /* light green */
.btn-tertiary  { background: #00b2e2; color: #fff; } /* blue */
.btn-cta       { background: #f7931d; color: #fff; } /* orange */

/* Forms
--------------------------- */
.form-control {
  border-radius: 2px;
  border: 1px solid #ccc;
}

.form-control:focus,
.form-control:active {
  outline: none;
  box-shadow: none;
  background: #ccc;
  border: 1px solid #000;
}

Pay attention to the reusability of components

When using the CSS framework in Vue.js, be sure to keep the reusability of components in mind. We cannot mix layout CSS with the component itself. Sometimes you may just need to reuse this component, and other times you may need a different layout.

Bad example

<!--Navigation.vue-->
<template>
  <p class="row">
    <p class="col">
      <nav>
        <ul>
          <li><a href="#">Navigation Item #1</a></li>
          <li><a href="#">Navigation Item #2</a></li>
          <li><a href="#">Navigation Item #3</a></li>
        </ul>
      </nav>
    </p>
  </p>
</template/>

<!--App.vue-->
<template>
  <p>
    ...
    <Navigation/>
  </p>
</template/>

This component may be used in both the header and footer. The two should look different, but they will contain the same information. Let's delete the layout HTML and move it to its parent or base component.

Good example

<!--Navigation.vue-->
<template>
  <nav>
    <ul>
      <li><a href="#">Navigation Item #1</a></li>
      <li><a href="#">Navigation Item #2</a></li>
      <li><a href="#">Navigation Item #3</a></li>
    </ul>
  </nav>
</template/>

<!--App.vue-->
<template>
  ...
  <p class="row">
    <p class="col">
      <Navigation/>
    </p>
  </p>
</template/>

Summary

CSS framework makes our development work easier . They make your template code consistent and easy to maintain and write. You can focus on the functionality and overall design of the program instead of wasting time on common tasks, such as creating buttons from scratch.

Bootstrap, Bulma and Foundation are just three commonly used frameworks, but they are not limited to these. There are also many frameworks for you to explore, such as Semantic UI and UI Kit, etc.

English original address: https://www.digitalocean.com/community/tutorials/vuejs-css-frameworks-vuejs

Author: Dave Berning

Related recommendations:

2020 front-end vue interview questions summary (with answers)

##vue tutorial recommendations: 2020 latest 5 A selection of vue.js video tutorials

For more programming-related knowledge, please visit:

Programming Courses! !

The above is the detailed content of How to integrate CSS framework in Vue? Method introduction. For more information, please follow other related articles on the PHP Chinese website!