➕ vant

2020-02-14 20:25:54 +08:00 · 2020-02-14 20:25:54 +08:00 · 016ead12f7
parent d759d8ffd0
commit 016ead12f7
5 changed files with 141 additions and 31 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,20 +1,24 @@
 module.exports = {
  root: true,
+
  env: {
    node: true
  },
+
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+
+  rules: {
+    "no-console": "off",
+    "no-debugger": "off"
+  },
+
  extends: [
-    "plugin:vue/essential",
+    "plugin:vue/strongly-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint"
-  ],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
-  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
-  }
+  ]
 };
--- a/package.json
+++ b/package.json
@ -9,6 +9,7 @@
  },
  "dependencies": {
    "core-js": "^3.6.4",
+    "vant": "^2.4.7",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.2",
    "vue-property-decorator": "^8.3.0",
@ -33,6 +34,7 @@
    "less-loader": "^5.0.0",
    "lint-staged": "^9.5.0",
    "prettier": "^1.19.1",
+    "ts-import-plugin": "^1.6.3",
    "typescript": "~3.7.5",
    "vue-template-compiler": "^2.6.11"
  },
--- a/src/App.vue
+++ b/src/App.vue
@ -1,31 +1,77 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view />
+  <div>
+    <img
+      class="user-poster"
+      src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png"
+    />
+    <van-row class="user-links">
+      <van-col span="6">
+        <van-icon name="pending-payment" />
+        待付款
+      </van-col>
+      <van-col span="6">
+        <van-icon name="records" />
+        待接单
+      </van-col>
+      <van-col span="6">
+        <van-icon name="tosend" />
+        待发货
+      </van-col>
+      <van-col span="6">
+        <van-icon name="logistics" />
+        已发货
+      </van-col>
+    </van-row>
+
+    <van-cell-group class="user-group">
+      <van-cell icon="records" title="全部订单" is-link />
+    </van-cell-group>
+
+    <van-cell-group>
+      <van-cell icon="points" title="我的积分" is-link />
+      <van-cell icon="gold-coin-o" title="我的优惠券" is-link />
+      <van-cell icon="gift-o" title="我收到的礼物" is-link />
+    </van-cell-group>
  </div>
 </template>

+<script lang="ts">
+import Vue from "vue";
+import { Row, Col, Icon, Cell, CellGroup } from "vant";
+export default Vue.extend({
+  components: {
+    [Row.name]: Row,
+    [Col.name]: Col,
+    [Icon.name]: Icon,
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup
+  }
+});
+</script>
+
 <style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+body {
+  font-size: 16px;
+  background-color: #f8f8f8;
  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
 }
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
+.user {
+  &-poster {
+    width: 100%;
+    height: 53vw;
+    display: block;
+  }
+  &-group {
+    margin-bottom: 15px;
+  }
+  &-links {
+    padding: 15px 0;
+    font-size: 12px;
+    text-align: center;
+    background-color: #fff;
+    .van-icon {
+      display: block;
+      font-size: 24px;
    }
  }
 }
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/*jshint esversion: 6 */
+
+const merge = require("webpack-merge");
+const tsImportPluginFactory = require("ts-import-plugin");
+
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule("ts")
+      .use("ts-loader")
+      .tap(options => {
+        options = merge(options, {
+          transpileOnly: true,
+          getCustomTransformers: () => ({
+            before: [
+              tsImportPluginFactory({
+                libraryName: "vant",
+                libraryDirectory: "es",
+                style: true
+              })
+            ]
+          }),
+          compilerOptions: {
+            module: "es2015"
+          }
+        });
+        return options;
+      });
+  }
+};
--- a/yarn.lock
+++ b/yarn.lock
@ -728,7 +728,7 @@
    levenary "^1.1.1"
    semver "^5.5.0"

-"@babel/runtime@^7.8.4":
+"@babel/runtime@7.x", "@babel/runtime@^7.8.4":
  version "7.8.4"
  resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.8.4.tgz?cache=0&sync_timestamp=1580387848686&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40babel%2Fruntime%2Fdownload%2F%40babel%2Fruntime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
  integrity sha1-159aIED3yqJNU+VjqtScvAVYEwg=
@ -956,6 +956,11 @@
    semver "^6.3.0"
    tsutils "^3.17.1"

+"@vant/icons@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.2.1.tgz?cache=0&sync_timestamp=1579418789431&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Ficons%2Fdownload%2F%40vant%2Ficons-1.2.1.tgz#309fecb97a4989866f045ce676b545c454701c8f"
+  integrity sha1-MJ/suXpJiYZvBFzmdrVFxFRwHI8=
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
  version "1.0.0"
  resolved "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
@ -8098,6 +8103,13 @@ tryer@^1.0.1:
  resolved "https://registry.npm.taobao.org/tryer/download/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
  integrity sha1-8shUBoALmw90yfdGW4HqrSQSUvg=

+ts-import-plugin@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/ts-import-plugin/-/ts-import-plugin-1.6.3.tgz#86598c4faefd958b9b50f400f7a1f117463d1d8f"
+  integrity sha512-cKzPmZtS1cssMZOnSfsIMdGXWEwA/h6wzKDwwdUQKyC6EBgzuChu3dcS3Wn4wzTzL9rCtz0Xi56aOeaH3lp5cw==
+  dependencies:
+    tslib "^1.10.0"
+
 ts-loader@^6.2.1:
  version "6.2.1"
  resolved "https://registry.npm.taobao.org/ts-loader/download/ts-loader-6.2.1.tgz#67939d5772e8a8c6bdaf6277ca023a4812da02ef"
@ -8409,6 +8421,16 @@ validate-npm-package-license@^3.0.1:
    spdx-correct "^3.0.0"
    spdx-expression-parse "^3.0.0"

+vant@^2.4.7:
+  version "2.4.7"
+  resolved "https://registry.npm.taobao.org/vant/download/vant-2.4.7.tgz#d51b555f5998a38b6dceac14f795f9f63d8a708f"
+  integrity sha1-1RtVX1mYo4ttzqwU95X59j2KcI8=
+  dependencies:
+    "@babel/runtime" "7.x"
+    "@vant/icons" "1.2.1"
+    "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
+    vue-lazyload "1.2.3"
+
 vary@~1.1.2:
  version "1.1.2"
  resolved "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@ -8455,6 +8477,11 @@ vue-hot-reload-api@^2.3.0:
  resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
  integrity sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=

+vue-lazyload@1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz?cache=0&sync_timestamp=1568830051812&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-lazyload%2Fdownload%2Fvue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"
+  integrity sha1-kB+ewVx+bKeHgaK65KNDaGve2yw=
+
 vue-loader@^15.8.3:
  version "15.9.0"
  resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.0.tgz#5d4b0378a4606188fc83e587ed23c94bc3a10998"