初始化

2021-07-09 21:16:11 +08:00 · 2021-07-09 21:16:11 +08:00 · caf7637bc5
parent afe88d9b17
commit caf7637bc5
9 changed files with 244 additions and 84 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -7,6 +7,8 @@
    "": {
      "version": "0.1.0",
      "dependencies": {
+        "axios": "^0.21.1",
+        "bootstrap": "^5.0.2",
        "core-js": "^3.6.5",
        "vue": "^2.6.11"
      },
@ -1683,6 +1685,12 @@
        "node": ">= 6"
      }
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.9.2.tgz?cache=0&sync_timestamp=1617293789176&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40popperjs%2Fcore%2Fdownload%2F%40popperjs%2Fcore-2.9.2.tgz",
+      "integrity": "sha1-rep7aVPLs0ZRdmsFSEaOdDxqI1M=",
+      "peer": true
+    },
    "node_modules/@soda/friendly-errors-webpack-plugin": {
      "version": "1.8.0",
      "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz?cache=0&sync_timestamp=1607927418007&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40soda%2Ffriendly-errors-webpack-plugin%2Fdownload%2F%40soda%2Ffriendly-errors-webpack-plugin-1.8.0.tgz",
@ -2921,6 +2929,14 @@
      "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
      "dev": true
    },
+    "node_modules/axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz?cache=0&sync_timestamp=1608611400719&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
    "node_modules/babel-loader": {
      "version": "8.2.2",
      "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz?cache=0&sync_timestamp=1606424869752&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.2.tgz",
@ -3172,6 +3188,14 @@
      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
      "dev": true
    },
+    "node_modules/bootstrap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.nlark.com/bootstrap/download/bootstrap-5.0.2.tgz",
+      "integrity": "sha1-r/I9Xg4DwxJVrUN1MO5lVueOco4=",
+      "peerDependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
    "node_modules/brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614011092368&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
@ -6183,7 +6207,6 @@
      "version": "1.14.1",
      "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555234886&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz",
      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=",
-      "dev": true,
      "engines": {
        "node": ">=4.0"
      }
@ -14945,6 +14968,12 @@
      "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
      "dev": true
    },
+    "@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npm.taobao.org/@popperjs/core/download/@popperjs/core-2.9.2.tgz?cache=0&sync_timestamp=1617293789176&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40popperjs%2Fcore%2Fdownload%2F%40popperjs%2Fcore-2.9.2.tgz",
+      "integrity": "sha1-rep7aVPLs0ZRdmsFSEaOdDxqI1M=",
+      "peer": true
+    },
    "@soda/friendly-errors-webpack-plugin": {
      "version": "1.8.0",
      "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz?cache=0&sync_timestamp=1607927418007&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40soda%2Ffriendly-errors-webpack-plugin%2Fdownload%2F%40soda%2Ffriendly-errors-webpack-plugin-1.8.0.tgz",
@ -15389,7 +15418,8 @@
      "version": "4.5.13",
      "resolved": "https://registry.nlark.com/@vue/cli-plugin-vuex/download/@vue/cli-plugin-vuex-4.5.13.tgz",
      "integrity": "sha1-mGRti8HmnPbGpsui/tPqzgNWw2A=",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@vue/cli-service": {
      "version": "4.5.13",
@ -15543,7 +15573,8 @@
      "version": "1.1.2",
      "resolved": "https://registry.npm.taobao.org/@vue/preload-webpack-plugin/download/@vue/preload-webpack-plugin-1.1.2.tgz",
      "integrity": "sha1-zrkktOyzucQ4ccekKaAvhCPmIas=",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "@vue/web-component-wrapper": {
      "version": "1.3.0",
@ -15782,13 +15813,15 @@
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/ajv-errors/download/ajv-errors-1.0.1.tgz",
      "integrity": "sha1-81mGrOuRr63sQQL72FAUlQzvpk0=",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "ajv-keywords": {
      "version": "3.5.2",
      "resolved": "https://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1616882666980&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
      "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
-      "dev": true
+      "dev": true,
+      "requires": {}
    },
    "alphanum-sort": {
      "version": "1.0.2",
@ -16033,6 +16066,14 @@
      "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
      "dev": true
    },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz?cache=0&sync_timestamp=1608611400719&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
    "babel-loader": {
      "version": "8.2.2",
      "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz?cache=0&sync_timestamp=1606424869752&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.2.tgz",
@ -16253,6 +16294,12 @@
      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
      "dev": true
    },
+    "bootstrap": {
+      "version": "5.0.2",
+      "resolved": "https://registry.nlark.com/bootstrap/download/bootstrap-5.0.2.tgz",
+      "integrity": "sha1-r/I9Xg4DwxJVrUN1MO5lVueOco4=",
+      "requires": {}
+    },
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614011092368&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz",
@ -18778,8 +18825,7 @@
    "follow-redirects": {
      "version": "1.14.1",
      "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555234886&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz",
-      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=",
-      "dev": true
+      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
    },
    "for-in": {
      "version": "1.0.2",
--- a/package.json
+++ b/package.json
@ -7,6 +7,8 @@
    "build": "vue-cli-service build"
  },
  "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^5.0.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
--- a/src/App.vue
+++ b/src/App.vue
@ -1,28 +1,16 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="app-container">
+    <h1>App 根组件</h1>
  </div>
 </template>

 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+export default {}
 </script>

-<style lang="less">
-#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 lang="less" scoped>
+.app-container {
+  padding-top: 45px;
+  padding-bottom: 50px;
 }
 </style>
--- a/src/components/Counter/Counter.vue
+++ b/src/components/Counter/Counter.vue
@ -0,0 +1,27 @@
+<template>
+  <div class="number-container d-flex justify-content-center align-items-center">
+    <!-- 减 1 的按钮 -->
+    <button type="button" class="btn btn-light btn-sm">-</button>
+    <!-- 购买的数量 -->
+    <span class="number-box">1</span>
+    <!-- 加 1 的按钮 -->
+    <button type="button" class="btn btn-light btn-sm">+</button>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.number-box {
+  min-width: 30px;
+  text-align: center;
+  margin: 0 5px;
+  font-size: 12px;
+}
+
+.btn-sm {
+  width: 30px;
+}
+</style>
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
@ -0,0 +1,60 @@
+<template>
+  <div class="footer-container">
+    <!-- 左侧的全选 -->
+    <div class="custom-control custom-checkbox">
+      <input type="checkbox" class="custom-control-input" id="cbFull" :checked="true" />
+      <label class="custom-control-label" for="cbFull">全选</label>
+    </div>
+
+    <!-- 中间的合计 -->
+    <div>
+      <span>合计：</span>
+      <span class="total-price">￥{{ 0 }}</span>
+    </div>
+
+    <!-- 结算按钮 -->
+    <button type="button" class="btn btn-primary btn-settle">结算（{{ 0 }}）</button>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.footer-container {
+  font-size: 12px;
+  height: 50px;
+  width: 100%;
+  border-top: 1px solid #efefef;
+  position: fixed;
+  bottom: 0;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.custom-checkbox {
+  display: flex;
+  align-items: center;
+}
+
+#cbFull {
+  margin-right: 5px;
+}
+
+.btn-settle {
+  height: 80%;
+  min-width: 110px;
+  border-radius: 25px;
+  font-size: 12px;
+}
+
+.total-price {
+  font-weight: bold;
+  font-size: 14px;
+  color: red;
+}
+</style>
--- a/src/components/Goods/Goods.vue
+++ b/src/components/Goods/Goods.vue
@ -0,0 +1,69 @@
+<template>
+  <div class="goods-container">
+    <!-- 左侧图片 -->
+    <div class="thumb">
+      <div class="custom-control custom-checkbox">
+        <!-- 复选框 -->
+        <input type="checkbox" class="custom-control-input" id="cb1" :checked="true" />
+        <label class="custom-control-label" for="cb1">
+          <!-- 商品的缩略图 -->
+          <img src="../../assets/logo.png" alt="" />
+        </label>
+      </div>
+    </div>
+    <!-- 右侧信息区域 -->
+    <div class="goods-info">
+      <!-- 商品标题 -->
+      <h6 class="goods-title">商品名称商品名称商品名称商品名称</h6>
+      <div class="goods-info-bottom">
+        <!-- 商品价格 -->
+        <span class="goods-price">￥0</span>
+        <!-- 商品的数量 -->
+        <Counter></Counter>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.goods-container {
+  + .goods-container {
+    border-top: 1px solid #efefef;
+  }
+  padding: 10px;
+  display: flex;
+  .thumb {
+    display: flex;
+    align-items: center;
+    img {
+      width: 100px;
+      height: 100px;
+      margin-right: 10px;
+    }
+  }
+
+  .goods-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex: 1;
+    .goods-title {
+      font-weight: bold;
+      font-size: 12px;
+    }
+    .goods-info-bottom {
+      display: flex;
+      justify-content: space-between;
+      .goods-price {
+        font-weight: bold;
+        color: red;
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/Header/Header.vue
+++ b/src/components/Header/Header.vue
@ -0,0 +1,23 @@
+<template>
+  <div class="header-container">标题</div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="less" scoped>
+.header-container {
+  font-size: 12px;
+  height: 45px;
+  width: 100%;
+  background-color: #1d7bff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  position: fixed;
+  top: 0;
+  z-index: 999;
+}
+</style>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,57 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/main.js
+++ b/src/main.js
@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+// 导入 bootstrap 样式表
+import 'bootstrap/dist/css/bootstrap.min.css'

 Vue.config.productionTip = false

 new Vue({
-  render: h => h(App),
+  render: h => h(App)
 }).$mount('#app')