feat: update vite demo

chungang1997 · Nov 24, 2022 · 29ad316 · 29ad316
1 parent 29401b8
commit 29ad316
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 49 deletions.
diff --git a/vant/vite/package.json b/vant/vite/package.json
@@ -6,14 +6,13 @@
     "build": "vite build"
   },
   "dependencies": {
-    "vant": "^3.5.0",
-    "vue": "^3.0.6"
+    "vant": "^4.0.0-rc.9",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.2.2",
-    "@vue/compiler-sfc": "^3.0.11",
-    "less": "^4.1.1",
-    "unplugin-vue-components": "^0.19.6",
-    "vite": "^2.9.0"
+    "@vitejs/plugin-vue": "^3.2.0",
+    "less": "^4.1.3",
+    "unplugin-vue-components": "^0.22.11",
+    "vite": "^3.2.4"
   }
 }
diff --git a/vant/vite/src/App.vue b/vant/vite/src/App.vue
@@ -8,12 +8,16 @@
 
     <van-cell-group>
       <van-cell>
-        <div class="goods-title">{{ goods.title }}</div>
-        <div class="goods-price">{{ formatPrice(goods.price) }}</div>
+        <template #title>
+          <div class="goods-title">{{ goods.title }}</div>
+          <div class="goods-price">{{ formatPrice(goods.price) }}</div>
+        </template>
       </van-cell>
       <van-cell class="goods-express">
-        <van-col span="10">运费：{{ goods.express }}</van-col>
-        <van-col span="14">剩余：{{ goods.remain }}</van-col>
+        <template #title>
+          <van-col span="10">运费：{{ goods.express }}</van-col>
+          <van-col span="14">剩余：{{ goods.remain }}</van-col>
+        </template>
       </van-cell>
     </van-cell-group>
 
@@ -49,60 +53,33 @@
 </template>
 
 <script>
-import {
-  Tag,
-  Col,
-  Icon,
-  Cell,
-  CellGroup,
-  Swipe,
-  Toast,
-  SwipeItem,
-  ActionBar,
-  ActionBarIcon,
-  ActionBarButton,
-} from 'vant';
-
 export default {
-  components: {
-    [Tag.name]: Tag,
-    [Col.name]: Col,
-    [Icon.name]: Icon,
-    [Cell.name]: Cell,
-    [CellGroup.name]: CellGroup,
-    [Swipe.name]: Swipe,
-    [SwipeItem.name]: SwipeItem,
-    [ActionBar.name]: ActionBar,
-    [ActionBarIcon.name]: ActionBarIcon,
-    [ActionBarButton.name]: ActionBarButton,
-  },
-
   data() {
     return {
       goods: {
-        title: '美国伽力果（约680g/3个）',
+        title: "美国伽力果213（约680g/3个）",
         price: 2680,
-        express: '免运费',
+        express: "免运费",
         remain: 19,
         thumb: [
-          'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
-          'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg',
+          "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
+          "https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg",
         ],
       },
     };
   },
 
   methods: {
     formatPrice() {
-      return '¥' + (this.goods.price / 100).toFixed(2);
+      return "¥" + (this.goods.price / 100).toFixed(2);
     },
 
     onClickCart() {
-      this.$router.push('cart');
+      this.$router.push("cart");
     },
 
     sorry() {
-      Toast('暂无后续逻辑~');
+      Toast("暂无后续逻辑~");
     },
   },
 };
@@ -141,10 +118,6 @@ body {
 
   &-cell-group {
     margin: 15px 0;
-
-    .van-cell__value {
-      color: #999;
-    }
   }
 
   &-tag {