基本框架提交

babel.config.js

@@ -1,5 +1,12 @@
 module.exports = {
   presets: [
     '@vue/cli-plugin-babel/preset'
-  ]
+  ],
+  plugins: [
+    ['import', {
+        libraryName: 'vant',
+        libraryDirectory: 'es',
+        style: true
+      }, 'vant']
+    ]
 }

package-lock.json

@@ -9,13 +9,16 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "normalize.css": "^8.0.1",
+        "vant": "^4.1.0",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-router": "~5.0.0",
-        "@vue/cli-service": "~5.0.0"
+        "@vue/cli-service": "~5.0.0",
+        "babel-plugin-import": "^1.13.6"
       }
     },
     "node_modules/@achrinza/node-ipc": {
@@ -2175,6 +2178,19 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "node_modules/@vant/use": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.5.1.tgz",
+      "integrity": "sha512-Zxd7lDz/LliVYEQi3PR9a8CQa/kGCVzF0u9hqDMaTlgXlbG0wHMFPllrcG0ThR6bfs8xrYVuSFM9pJn6HSoUGQ==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
@@ -3369,6 +3385,15 @@
         "object.assign": "^4.1.0"
       }
     },
+    "node_modules/babel-plugin-import": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.6.tgz",
+      "integrity": "sha512-N7FYnGh0DFsvDRkAPsvFq/metVfVD7P2h1rokOPpEH4cZbdRHCW+2jbXt0nnuqowkm/xhh2ww1anIdEpfYa7ZA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0"
+      }
+    },
     "node_modules/babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
@@ -7032,6 +7057,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "node_modules/npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -9473,6 +9503,18 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vant": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-4.1.0.tgz",
+      "integrity": "sha512-wAcKaWjvWrmM4bSvyYxhh0LDe9KYFOKzNAgZBpJzokAuldnaUXQF8Dco7B30U2BglErxQC1NhqLCgnZoybOnqg==",
+      "dependencies": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.5.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -11872,6 +11914,17 @@
         "@types/node": "*"
       }
     },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "@vant/use": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.5.1.tgz",
+      "integrity": "sha512-Zxd7lDz/LliVYEQi3PR9a8CQa/kGCVzF0u9hqDMaTlgXlbG0wHMFPllrcG0ThR6bfs8xrYVuSFM9pJn6HSoUGQ==",
+      "requires": {}
+    },
     "@vue/babel-helper-vue-jsx-merge-props": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
@@ -12105,7 +12158,8 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
       "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -12631,7 +12685,8 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -12690,7 +12745,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-escapes": {
       "version": "3.2.0",
@@ -12816,6 +12872,15 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-import": {
+      "version": "1.13.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.6.tgz",
+      "integrity": "sha512-N7FYnGh0DFsvDRkAPsvFq/metVfVD7P2h1rokOPpEH4cZbdRHCW+2jbXt0nnuqowkm/xhh2ww1anIdEpfYa7ZA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0"
+      }
+    },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.3.3.tgz",
@@ -13460,7 +13525,8 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
       "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.7.3",
@@ -13646,7 +13712,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -14662,7 +14729,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -15558,6 +15626,11 @@
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
       "dev": true
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -15964,25 +16037,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -16087,7 +16164,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -16122,7 +16200,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -17319,6 +17398,15 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vant": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-4.1.0.tgz",
+      "integrity": "sha512-wAcKaWjvWrmM4bSvyYxhh0LDe9KYFOKzNAgZBpJzokAuldnaUXQF8Dco7B30U2BglErxQC1NhqLCgnZoybOnqg==",
+      "requires": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.5.0"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -17746,7 +17834,8 @@
           "version": "8.13.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
           "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -17867,7 +17956,8 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",

package.json

@@ -8,12 +8,15 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "normalize.css": "^8.0.1",
+    "vant": "^4.1.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-service": "~5.0.0"
+    "@vue/cli-service": "~5.0.0",
+    "babel-plugin-import": "^1.13.6"
   }
 }

src/App.vue

@@ -1,30 +1,9 @@
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view/>
+	<div>民宗APP</div>
 </template>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
+	@import '~normalize.css';
 
-nav {
-  padding: 30px;
-}
 
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
-  color: #42b983;
-}
 </style>

src/main.js

@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import { Button } from 'vant';
+import 'vant/lib/index.css';
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).use(Button).mount('#app')