update: vant vue3

Author: shangbin

package-lock.json

@@ -30,8 +30,8 @@
     "copy-to-clipboard": "^3.3.1",
     "crypto-random-string": "^3.3.1",
     "css": "^3.0.0",
-    "element-plus": "^1.2.0-beta.3",
     "css-scoped": "^1.0.0",
+    "element-plus": "^1.2.0-beta.3",
     "escodegen": "^2.0.0",
     "espree": "^7.3.0",
     "eventemitter3": "^4.0.7",
@@ -43,13 +43,13 @@
     "nanoid": "^3.1.30",
     "prettier": "^2.4.0",
     "split.js": "^1.6.2",
-    "vant": "^2.10.7",
+    "vant": "^3.3.7",
     "vite": "^2.6.14",
     "vue": "^3.2.22",
-    "vuedraggable": "^4.1.0",
-    "vuex": "^4.0.2",
+    "vue-github-button": "^1.3.0",
     "vue-template-compiler": "^2.6.14",
-    "vue-github-button": "^1.3.0"
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@babel/generator": "^7.11.6",

package.json

@@ -59,11 +59,10 @@
   </div>
 </template>
 <script>
-// import vant from "../rawComponents/vant";
 // import iview from "../rawComponents/iview";
 // import quasar from "../rawComponents/quasar";
 import raw from "../rawComponents/raw/index.vue";
-import ele from "../rawComponents/element/index.vue";
+import { defineAsyncComponent } from "vue";
 
 export default {
   data() {
@@ -87,7 +86,13 @@ export default {
         titleArray: [],
       }, {
         icon: ('https://static.imonkey.xueersi.com/download/vcc-resource/logo/vant-n.png'),
-        enable: false
+        clickCallback: this.onSelectElement,
+        className: "demonstration-vant",
+        selectIndex: 0,
+        componentName: 'vant',
+        enable: true,
+        titleArray: [],
+        enable: true
       }, {
         icon: ('https://static.imonkey.xueersi.com/download/vcc-resource/logo/iview-n.png'),
         enable: false
@@ -173,21 +178,12 @@ export default {
         }
       }
     },
-    surprise() {
-      const that = this;
-      function color() {
-        window.requestAnimationFrame(color);
-      }
-
-      window.requestAnimationFrame(color);
-    }
   },
 
   created() { },
 
   mounted() {
     this.init();
-    // this.surprise();
   },
 
   computed: {
@@ -210,10 +206,10 @@ export default {
 
   components: {
     raw,
-    // vant,
+    vant: defineAsyncComponent(() => import("../rawComponents/vant")),
     // iview,
     // quasar,
-    ele,
+    ele: defineAsyncComponent(() => import("../rawComponents/element/index.vue")),
   },
 
 };

src/components/RawComponents.vue

@@ -1,6 +1,13 @@
 import { createApp } from "vue";
 import ElementPlus from "element-plus";
-import { QuestionFilled, CirclePlus, DocumentCopy, Delete, Refresh, Minus } from "@element-plus/icons";
+import {
+  QuestionFilled,
+  CirclePlus,
+  DocumentCopy,
+  Delete,
+  Refresh,
+  Minus,
+} from "@element-plus/icons";
 
 import "element-plus/dist/index.css";
 import APP from "./App.vue";
@@ -19,12 +26,21 @@ function createBaseApp(renderComponent = {}) {
   return app;
 }
 
-const globalApp = createBaseApp(APP)
+const globalApp = createBaseApp(APP);
 globalApp.mount("#app");
 
 // 内部需要同样配置的全局Vue
 self.createBaseApp = createBaseApp;
 self.globalApp = globalApp; // 内部需要使用Vuex
 
+import("@/libs/store.js");
 
-import("@/libs/store.js");
+function loadVant() {
+  const vantLoadPromise = (() => import("vant"))();
+  (() => import("vant/lib/index.css"))();
+  vantLoadPromise.then((vantModule) => {
+    self.globalApp.use(vantModule);
+  });
+}
+
+loadVant();

src/main.js

@@ -1,36 +1,70 @@
-  <template lc_id="7cADZ+9vIL">
-      <div lc_id="paR1gkzb2P">
-          <div lc_id="xpLawHH5Ks">
-              <div class="demonstration" lc_id="LXAb8pRrmp">Button 按钮:</div>
-              <van-button lc-mark type="primary" lc_id="SrEHhpiQFn">Primary</van-button>
-              <van-button lc-mark type="info" lc_id="y5KpXFwN4Y">Info</van-button>
-              <van-button lc-mark type="default" lc_id="lys06/4mtk">Default</van-button>
-              <van-button lc-mark type="danger" lc_id="vYu5fg0ITt">Danger</van-button>
-              <van-button lc-mark type="warning" lc_id="gKMFNxDPu4">Warning</van-button>
-              <van-button lc-mark plain type="primary" lc_id="5ggxtP8mY7">朴素按钮</van-button>
-              <van-button lc-mark plain type="info" lc_id="J2aDU2i24z">朴素按钮</van-button>
-              <van-button lc-mark loading type="primary" lc_id="hrHD1DGPGe"></van-button>
-              <van-button lc-mark loading type="primary" loading-type="spinner" lc_id="fezG6odQJ0"></van-button>
-              <van-button lc-mark loading type="info" loading-text="加载中..." lc_id="xvgVvk/peN"></van-button>
-          </div>
-          <div lc_id="nQa+C7dPYW">
-              <div class="demonstration" lc_id="hvf2MQVJPH">Cell 单元格:</div>
-              <van-cell-group lc-mark lc_id="9r3MUvTPyx">
-                  <van-cell title="单元格" value="内容" lc_id="yCbsNk6GF+"></van-cell>
-                  <van-cell title="单元格" value="内容" label="描述信息" lc_id="+30wYnfplY"></van-cell>
-                  <van-cell title="单元格" icon="location-o" lc_id="hxvJ+bSzIM"></van-cell>
-                  <van-cell title="单元格" is-link arrow-direction="down" value="内容" lc_id="vXMVp6xR7q"></van-cell>
-              </van-cell-group>
-          </div>
+<template >
+  <div>
+    <div>
+      <div class="demonstration-vant">Button 按钮</div>
+      <div id="vant-button">
+        <van-button lc-mark type="primary">主要按钮</van-button>
+        <van-button lc-mark type="success">成功按钮</van-button>
+        <van-button lc-mark type="default">默认按钮</van-button>
+        <van-button lc-mark type="warning">警告按钮</van-button>
+        <van-button lc-mark type="danger">危险按钮</van-button>
+
+        <van-button lc-mark plain type="primary">朴素按钮</van-button>
+        <van-button lc-mark plain type="primary">朴素按钮</van-button>
+
+        <van-button lc-mark loading type="primary" />
+        <van-button lc-mark loading type="primary" loading-type="spinner" />
+        <van-button lc-mark loading type="primary" loading-text="加载中..." />
+
+        <van-button lc-mark square type="primary">方形按钮</van-button>
+        <van-button lc-mark round type="primary">圆形按钮</van-button>
+
+        <van-button lc-mark icon="plus" type="primary" />
+        <van-button lc-mark icon="plus" type="primary">按钮</van-button>
+        <van-button lc-mark icon="https://img.yzcdn.cn/vant/user-active.png" type="primary">
+          按钮
+        </van-button>
+
+        <van-button lc-mark type="primary" size="large">大号按钮</van-button>
+        <van-button lc-mark type="primary" size="normal">普通按钮</van-button>
+        <van-button lc-mark type="primary" size="small">小型按钮</van-button>
+        <van-button lc-mark type="primary" size="mini">迷你按钮</van-button>
+
+        <van-button lc-mark type="primary" block>块级元素</van-button>
+
+        <van-button lc-mark color="#7232dd">单色按钮</van-button>
+        <van-button lc-mark color="#7232dd" plain>单色按钮</van-button>
+        <van-button lc-mark color="linear-gradient(to right, #ff6034, #ee0a24)">
+          渐变色按钮
+        </van-button>
       </div>
-  </template>
+    </div>
+    <div>
+      <div class="demonstration-vant">Cell 单元格</div>
+      <van-cell-group lc-mark>
+        <van-cell title="单元格" value="内容" />
+        <van-cell title="单元格" value="内容" label="描述信息" />
+      </van-cell-group>
+      <van-cell-group inset>
+        <van-cell title="单元格" value="内容" />
+        <van-cell title="单元格" value="内容" label="描述信息" />
+      </van-cell-group>
+    </div>
+  </div>
+</template>
   <script>
 export default {
   data() {
     return {};
   },
   methods: {},
 };  </script>
-  <style scoped>button + button {
+  <style scoped>
+button + button {
   margin-top: 10px;
-}</style>
+}
+
+#vant-button > * {
+  margin: 0 5px 5px 0;
+}
+</style>