使用 Bootstrap-Vue 写好了界面

package-lock.json

@@ -1305,6 +1305,61 @@
         }
       }
     },
+    "@nuxt/opencollective": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npm.taobao.org/@nuxt/opencollective/download/@nuxt/opencollective-0.3.2.tgz",
+      "integrity": "sha1-g8twzbK6xfrW+Mk1KeexEYfUnAI=",
+      "requires": {
+        "chalk": "^4.1.0",
+        "consola": "^2.15.0",
+        "node-fetch": "^2.6.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
+          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995384030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
+          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
+          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
+          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1618559697170&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
+          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1618560959124&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
+          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@sindresorhus/is": {
       "version": "0.14.0",
       "resolved": "https://registry.npm.taobao.org/@sindresorhus/is/download/@sindresorhus/is-0.14.0.tgz",
@@ -3529,6 +3584,23 @@
       "dev": true,
       "optional": true
     },
+    "bootstrap": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npm.taobao.org/bootstrap/download/bootstrap-4.6.0.tgz",
+      "integrity": "sha1-l7nymsmPmN+kO/dGgmLYQ5JVL9c="
+    },
+    "bootstrap-vue": {
+      "version": "2.21.2",
+      "resolved": "https://registry.npm.taobao.org/bootstrap-vue/download/bootstrap-vue-2.21.2.tgz",
+      "integrity": "sha1-7Dj2bDoiBb7MzdthWKmR2WUJ7Qs=",
+      "requires": {
+        "@nuxt/opencollective": "^0.3.2",
+        "bootstrap": ">=4.5.3 <5.0.0",
+        "popper.js": "^1.16.1",
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^3.1.0"
+      }
+    },
     "boxen": {
       "version": "5.0.1",
       "resolved": "https://registry.npm.taobao.org/boxen/download/boxen-5.0.1.tgz?cache=0&sync_timestamp=1617702541647&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fboxen%2Fdownload%2Fboxen-5.0.1.tgz",
@@ -4725,6 +4797,11 @@
       "integrity": "sha1-izIIk1kwjRERFdgcrT/Oq4iPl7w=",
       "dev": true
     },
+    "consola": {
+      "version": "2.15.3",
+      "resolved": "https://registry.npm.taobao.org/consola/download/consola-2.15.3.tgz",
+      "integrity": "sha1-LhH5jWpL5x/3LgvfB70j4Sy2FVA="
+    },
     "console-browserify": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/console-browserify/download/console-browserify-1.2.0.tgz",
@@ -9965,6 +10042,11 @@
       "dev": true,
       "optional": true
     },
+    "node-fetch": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npm.taobao.org/node-fetch/download/node-fetch-2.6.1.tgz",
+      "integrity": "sha1-BFvTI2Mfdu0uK1VXM5RBa2OaAFI="
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npm.taobao.org/node-forge/download/node-forge-0.10.0.tgz",
@@ -10673,6 +10755,16 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npm.taobao.org/popper.js/download/popper.js-1.16.1.tgz",
+      "integrity": "sha1-KiI8s9x7YhPXQOQDcr5A3kPmWxs="
+    },
+    "portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npm.taobao.org/portal-vue/download/portal-vue-2.1.7.tgz",
+      "integrity": "sha1-6ggGmyW2QMoIpbhvZ8YS8V9OStQ="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.28.tgz",
@@ -14529,6 +14621,11 @@
         }
       }
     },
+    "vue-functional-data-merge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npm.taobao.org/vue-functional-data-merge/download/vue-functional-data-merge-3.1.0.tgz",
+      "integrity": "sha1-CKd5dYO381aAWH+KHVHXKaodxlc="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -13,6 +13,7 @@
   },
   "main": "background.js",
   "dependencies": {
+    "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",

src/App.vue

@@ -1,29 +1,37 @@
 <template>
-  <div id="app">
+  <div class="vh-100 d-flex flex-column">
-    <img alt="Vue logo" src="./assets/logo.png" />
+    <div class="flex-fill overflow-auto pt-3 px-3">
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+      <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({
+@Component
-  components: {
-    HelloWorld,
-  },
-})
 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>

src/background.ts

@@ -13,7 +13,7 @@ protocol.registerSchemesAsPrivileged([
 async function createWindow() {
   // Create the browser window.
   const win = new BrowserWindow({
-    width: 800,
+    width: 450,
     height: 600,
     webPreferences: {
       // Use pluginOptions.nodeIntegration, leave this alone

src/main.ts

@@ -1,6 +1,14 @@
 import Vue from "vue";
 import App from "./App.vue";
 
+import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
+
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
+
+Vue.use(BootstrapVue);
+Vue.use(BootstrapVueIcons);
+
 Vue.config.productionTip = false;
 
 new Vue({