使用 Bootstrap-Vue 写好了界面
This commit is contained in:
parent
06bba51d9e
commit
44438cec22
5 changed files with 135 additions and 21 deletions
97
package-lock.json
generated
97
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
48
src/App.vue
48
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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue