Vue中如何集成CSS框架？方法介绍

npm install vue-cli
vue init webpack project-name

npm install bootstrap jquery --save

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';

npm install --save popper.js

npm install bulma

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

$ npm install foundation-sites --save

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

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

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

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

/* 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;
}

<!--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/>

<!--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/>