init nuxt3 & vant template

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    'airbnb-base',
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+  },
+  plugins: [
+    'vue',
+    '@typescript-eslint',
+  ],
+  rules: {
+  },
+};

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+*.log
+.nuxt
+nuxt.d.ts
+.output
+.env
+.vscode
+.idea

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all",
+  "arrowParens": "avoid",
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "proseWrap": "always",
+  "endOfLine": "lf"
+}

README.md

@@ -0,0 +1,29 @@
+# Nuxt 3 Minimal Starter
+
+We recommend to look at the [documentation](https://v3.nuxtjs.org).
+
+## Setup
+
+Make sure to install the dependencies
+
+```bash
+yarn install
+```
+
+## Development
+
+Start the development server on http://localhost:3000
+
+```bash
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+yarn build
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).

app.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

composables/useModal.js

@@ -0,0 +1,5 @@
+import { useState } from '#app';
+
+export const useModal = () => {
+  return useState('modalDisplay', () => false);
+};

layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

nuxt.config.ts

@@ -0,0 +1,26 @@
+import { defineNuxtConfig } from 'nuxt3';
+import { resolve } from 'path';
+
+// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
+export default defineNuxtConfig({
+  alias: {
+    images: resolve(__dirname, './assets/images'),
+    mocks: resolve(__dirname, './server/mocks'),
+    config: resolve(__dirname, './config'),
+    components: resolve(__dirname, './components'),
+    pages: resolve(__dirname, './pages'),
+    hooks: resolve(__dirname, './hooks'),
+  },
+  meta: {
+    meta: [
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+    ],
+    link: [
+      {
+        rel: 'stylesheet',
+        href: 'https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css',
+      },
+    ],
+    script: [{ src: '' }],
+  },
+});

package.json

@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nuxi dev --port 3001",
+    "build": "nuxi build",
+    "start": "node .output/server/index.mjs"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "eslint": "^8.7.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-vue": "^8.3.0",
+    "less": "^4.1.2",
+    "nuxt3": "latest",
+    "prettier": "^2.5.1"
+  },
+  "dependencies": {
+    "axios": "^0.25.0",
+    "dayjs": "^1.10.7",
+    "lodash": "^4.17.21",
+    "vant": "^3.4.2"
+  }
+}

pages/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <van-image
+      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>
+export default {
+  layout: 'default',
+};
+</script>
+
+<style lang="less">
+body {
+  margin: 0;
+  font-size: 16px;
+  background-color: #f8f8f8;
+  -webkit-font-smoothing: antialiased;
+}
+.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;
+    }
+  }
+}
+</style>

plugins/vant.js

@@ -0,0 +1,16 @@
+// 目前在 nuxt 中无法按需引入样式，因此采用手动引入的方式
+import 'vant/lib/index.css';
+
+import { Cell, CellGroup, Col, Icon, Image, Row } from 'vant';
+
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp
+    .use(Row)
+    .use(Col)
+    .use(Image)
+    .use(Icon)
+    .use(Cell)
+    .use(CellGroup);
+});

tsconfig copy.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://v3.nuxtjs.org/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}