小白嘗試——基於Vue和Bootstrap設計簡單登錄界面

	工作之餘在慕課網上學習Vue，我想自己操刀一把寫一個網頁。登錄頁面在我看來是一個比較好入手的小項目，所以就出了本篇文章。在寫登錄頁面時，我認爲引入Bootstrap寫網頁能方便一些。如果我要是直接用Html+Css寫網頁的話，我需要寫的css樣式太多了。結果我發現，用Bootstrap寫網頁也沒有那麼輕巧。

項目框架

代碼
App.vue

<template>
  <div id="app" :style="{ backgroundImage: 'url(' + bg1 + ')' }">
    <div class="center" :style="{ backgroundImage: 'url(' + bg2  + ')' }">
      <Login></Login>
      </div>
  </div>
</template>
<script>
import Login from './components/Login.vue'
import bg1 from './assets/img/bg1.jpg'
import bg2 from './assets/img/bg2.png'

export default {
  components: {
    Login
  },
  data () {
    return {
      bg1: bg1,
      bg2: bg2
    }
  }
}
</script>
<style scoped>
* {
  padding: 0%;
  margin: 0%;
}
#app {
  background: url(./assets/img/bg1.jpg) no-repeat;
  height: 100%;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin-top: 0px;
}
#app .center {
  margin-left:35%;
  background: no-repeat;
  margin-top:12%;
  width: 40%;
  height: 45%;
}
</style>

router文件夾中index.js

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../components/Login.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: Login
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

Login.vue

<template>
  <div id="sign" class="container-fluid">
    <h2>賬號登錄</h2>
    <form id="sign-in" class="form-horizontal">
      <div id="input1" class="form-group">
        <span for="account" class="col-xs-2 control-label"
          >賬號 <i class="glyphicon glyphicon-user"></i
        ></span>
        <div class="col-xs-6">
          <input
            type="text"
            class="form-control"
            id="inputText"
            placeholder="賬號"
            aria-describedby="sizing-addon2"
          />
        </div>
      </div>
      <div class="form-group">
        <span for="password" class="col-xs-2 control-label"
          >密碼 <i class="glyphicon glyphicon-lock"></i
        ></span>
        <div class="col-xs-6">
          <input
            type="password"
            class="form-control"
            id="inputPassword"
            @keydown="rules(password, 'password')"
            placeholder="密碼"
            aria-describedby="sizing-addon2"
          />
        </div>
      </div>
   <div class="row">
      <div  id="checkbox" class="col-xs-6 col-sm-6" >
        <p> <input  type="checkbox"/> 記住賬號</p>
      </div>
      <div id="a1" class="col-xs-6 col-sm-6" >
         <a  href="#">忘記密碼</a>
      </div>
    </div>
<div class="signButton">
   <button type="button" class="btn btn-info" data-toggle="modal">登錄</button>
</div>
    </form>
  </div>
</template>
<script>
</script>
<style scoped src="../assets/css/bootstrap.min.css"></style>
<style scoped>
* {
  padding: 0%;
  margin: 0%;
}
h2 {
  margin-left: 32%;
}
.container form {
  text-align: center;
  background-color: blue;
}
ul {
  text-align: center;
}

.form-group #sign {
  width: 50%;
}

#sign-in #input1 {
  padding-top: 4%;
}
span{
  float: left;
  margin-left: 4%;
}
.row #checkbox{
   margin-top: 1%;
}
.row p{
  margin-left: 25%;
 }
.row #a1{
   float:right;
   margin-top: 1%;
   clear:right;
}
.signButton{
  margin-left: 25%;
}
.signButton button{
  width: 50%;
  height: 20%;
}
</style>

項目截圖

注意事項

	我一開始使用的vue4.0，然後我在設計的時候把項目vue版本降到2.6。
	我是將有關Bootstrap的文件複製到項目文件夾中，初學者也可以使用`npm install Bootstrap`實現項目設計時隨便用Bootstrap組件。如果像我一樣將有關Bootstrap的文件複製到項目文件夾，你需要使用`<style scoped src="../assets/css/bootstrap.min.css"></style>`語句，方可使用Bootstrap組件。

答疑

	問：如何往Vue插入網頁背景圖？
	答：請參考App.vue文件代碼。
	問：你的項目能在手機瀏覽器兼容嗎？
	答：不能。項目存在的問題網頁設計時應該不使用流動佈局。我使用流動佈局時，發現項目組件都“水花四濺”。