使用 Bootstrap-Vue 写好了界面

src/App.vue

@@ -1,29 +1,37 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+  <div class="vh-100 d-flex flex-column">
+    <div class="flex-fill overflow-auto pt-3 px-3">
+      <div class="d-flex my-2">
+        <b-avatar variant="primary" text="ZZ" class="my-2 mr-2"> </b-avatar>
+        <div class="d-flex flex-column">
+          <p class="my-1">Zhao Zuohong</p>
+          <b-button variant="primary" class="mb-2 mr-5 text-left"
+            >Earth is the third planet from the Sun and the only astronomical
+            object known to harbor life.</b-button
+          >
+        </div>
+      </div>
+      <div class="d-flex flex-row-reverse my-2">
+        <b-avatar variant="success" text="ZZ" class="my-2 ml-2"> </b-avatar>
+        <div class="d-flex flex-column">
+          <p class="my-1 text-right">Zhao Zuohong</p>
+          <b-button variant="success" class="mb-2 ml-5 text-left"
+            >It is the densest planet in the Solar System and the largest and
+            most massive of the four rocky planets.</b-button
+          >
+        </div>
+      </div>
+    </div>
+    <b-form class="d-flex m-3">
+      <b-form-input class="flex-fill mr-2"> </b-form-input>
+      <b-button pill variant="success">Button</b-button>
+    </b-form>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import HelloWorld from "./components/HelloWorld.vue";
 
-@Component({
-  components: {
-    HelloWorld,
-  },
-})
+@Component
 export default class App extends Vue {}
 </script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>