在Vue中使用Bootstrap（简单使用有手就行）

yarn add bootstrap@3 
如果没有yarn则执行下面代码
npm install bootstrap@3

然后在Vue项目中的main.js引入

import Vue from 'vue'
import App from './App'
// 引入BootStrap
import 'bootstrap/dist/css/bootstrap.min.css'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

image.png

<template>
    <div class="container">
      <form class="form-signin">
        <h2 class="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>
    </div>
</template>

本文章只是简单实现css样式，具体有趣的内容还需加入jQuery一起使用见效果。