Commit 2b11cec27bd9b264ab6333f2a33af3a1a9bb68af

Authored by 王家文
1 parent cd0050a6
Exists in master

【工具】GM工具

index.html
... ... @@ -4,7 +4,7 @@
4 4 <meta charset="UTF-8">
5 5 <link rel="icon" href="/favicon.ico" />
6 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7   - <title>Vite App</title>
  7 + <title>海滩管理工具</title>
8 8 </head>
9 9 <body>
10 10 <div id="app"></div>
... ...
package-lock.json
... ... @@ -8,6 +8,8 @@
8 8 "name": "ht-gm",
9 9 "version": "0.0.0",
10 10 "dependencies": {
  11 + "@popperjs/core": "^2.11.8",
  12 + "bootstrap": "^5.3.3",
11 13 "vue": "^3.0.4"
12 14 },
13 15 "devDependencies": {
... ... @@ -252,6 +254,15 @@
252 254 "node": ">= 8"
253 255 }
254 256 },
  257 + "node_modules/@popperjs/core": {
  258 + "version": "2.11.8",
  259 + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
  260 + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
  261 + "funding": {
  262 + "type": "opencollective",
  263 + "url": "https://opencollective.com/popperjs"
  264 + }
  265 + },
255 266 "node_modules/@rollup/plugin-commonjs": {
256 267 "version": "16.0.0",
257 268 "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-16.0.0.tgz",
... ... @@ -825,6 +836,24 @@
825 836 "readable-stream": "^3.4.0"
826 837 }
827 838 },
  839 + "node_modules/bootstrap": {
  840 + "version": "5.3.3",
  841 + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
  842 + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
  843 + "funding": [
  844 + {
  845 + "type": "github",
  846 + "url": "https://github.com/sponsors/twbs"
  847 + },
  848 + {
  849 + "type": "opencollective",
  850 + "url": "https://opencollective.com/bootstrap"
  851 + }
  852 + ],
  853 + "peerDependencies": {
  854 + "@popperjs/core": "^2.11.8"
  855 + }
  856 + },
828 857 "node_modules/brace-expansion": {
829 858 "version": "1.1.11",
830 859 "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
... ...
package.json
... ... @@ -6,10 +6,12 @@
6 6 "build": "vite build"
7 7 },
8 8 "dependencies": {
  9 + "@popperjs/core": "^2.11.8",
  10 + "bootstrap": "^5.3.3",
9 11 "vue": "^3.0.4"
10 12 },
11 13 "devDependencies": {
12   - "vite": "^1.0.0-rc.13",
13   - "@vue/compiler-sfc": "^3.0.4"
  14 + "@vue/compiler-sfc": "^3.0.4",
  15 + "vite": "^1.0.0-rc.13"
14 16 }
15   -}
16 17 \ No newline at end of file
  18 +}
... ...
src/App.vue
1 1 <template>
2   - <img alt="Vue logo" src="./assets/logo.png" />
  2 + <ToolTitle msg="Hello Vue 3.0 + Vite" />
3 3 <HelloWorld msg="Hello Vue 3.0 + Vite" />
4 4 </template>
5 5  
6 6 <script>
  7 +import ToolTitle from './components/ToolTitle.vue'
7 8 import HelloWorld from './components/HelloWorld.vue'
8 9  
9 10 export default {
10 11 name: 'App',
11 12 components: {
  13 + ToolTitle,
12 14 HelloWorld
13 15 }
14 16 }
... ...
src/components/ToolTitle.vue 0 → 100644
... ... @@ -0,0 +1,43 @@
  1 +<template>
  2 + <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  3 + <!-- Brand -->
  4 + <a class="navbar-brand" href="#">Logo</a>
  5 +
  6 + <!-- Links -->
  7 + <ul class="navbar-nav">
  8 + <li class="nav-item">
  9 + <a class="nav-link" href="#">Link 1</a>
  10 + </li>
  11 + <li class="nav-item">
  12 + <a class="nav-link" href="#">Link 2</a>
  13 + </li>
  14 +
  15 + <!-- Dropdown -->
  16 + <li class="nav-item dropdown">
  17 + <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
  18 + Dropdown link
  19 + </a>
  20 + <div class="dropdown-menu">
  21 + <a class="dropdown-item" href="#">Link 1</a>
  22 + <a class="dropdown-item" href="#">Link 2</a>
  23 + <a class="dropdown-item" href="#">Link 3</a>
  24 + </div>
  25 + </li>
  26 + </ul>
  27 + </nav>
  28 +
  29 +</template>
  30 +
  31 +<script>
  32 +export default {
  33 + name: 'ToolTitle',
  34 + props: {
  35 + msg: String
  36 + },
  37 + data() {
  38 + return {
  39 + count: 0
  40 + }
  41 + }
  42 +}
  43 +</script>
... ...
src/main.js
1 1 import { createApp } from 'vue'
2 2 import App from './App.vue'
3 3 import './index.css'
  4 +import 'bootstrap'
  5 +import 'bootstrap/dist/css/bootstrap.min.css'
4 6  
5 7 createApp(App).mount('#app')
... ...