:space_invader:feat: reset UI

.eslintrc.cjs

@@ -1,15 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
-module.exports = {
-  root: true,
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest'
-  }
-}

.prettierrc.json

@@ -1,8 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/prettierrc",
-  "semi": false,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "printWidth": 100,
-  "trailingComma": "none"
-}

.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-  "recommendations": [
-    "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
+  "recommendations": ["Vue.volar"]
 }

README.md

@@ -9,7 +9,7 @@ This template should help get you started developing with Vue 3 in Vite.
 - pnpm
 - TypeScript
 - Pinia
-- [NutUI 4.x](https://nutui.jd.com/h5/vue/4x/#/zh-CN/component/button)
+- Vant 4 按需引入组件样式
 
 ## Recommended IDE
 
@@ -35,9 +35,3 @@ pnpm dev
 ```sh
 pnpm build
 ```
-
-### Lint with [ESLint](https://eslint.org/)
-
-```sh
-pnpm lint
-```

components.d.ts

@@ -7,9 +7,9 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
-    NutButton: typeof import('@nutui/nutui')['Button']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VanButton: typeof import('vant/es')['Button']
+    VanIcon: typeof import('vant/es')['Icon']
   }
 }

package.json

@@ -8,30 +8,21 @@
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "build-only": "vite build",
-    "type-check": "vue-tsc --build --force",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
-    "@nutui/nutui": "^4.3.2",
-    "@nutui/touch-emulator": "^1.0.0",
     "pinia": "^2.1.7",
+    "vant": "^4.8.5",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
-    "@nutui/auto-import-resolver": "^1.0.0",
-    "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
     "@types/node": "^20.11.25",
+    "@vant/auto-import-resolver": "^1.0.2",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^8.49.0",
-    "eslint-plugin-vue": "^9.17.0",
     "npm-run-all2": "^6.1.2",
-    "prettier": "^3.0.3",
     "typescript": "~5.4.0",
     "unplugin-vue-components": "^0.26.0",
     "vite": "^5.1.5",

src/App.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { ref } from 'vue'
+import Navbottom from './views/Navbottom.vue';
+
+const abc = ref('入口文件App.vue')
+
 </script>
 
 <template>
-  <header>
-    <h1>Hello World</h1>
-    <div class="wrapper">
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/my">My</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />
+  <div>
+    {{ abc }}
+    <van-button type="primary" >按钮</van-button>
+    <template>
+      <van-button type="primary" />看不见这个按钮
+    </template>
+    <router-view></router-view>
+    <Navbottom/>
+  </div>
 </template>
 
 <style scoped></style>

src/assets/css/navbottom.css

@@ -0,0 +1,35 @@
+/**
+    底部导航
+*/
+.footer {
+  height: 60px;
+}
+.footer-seat {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  border-top: 1px solid #eee;
+}
+.footer-list {
+  max-width: 1080px;
+  height: 60px;
+  margin: auto;
+}
+.footer-list ul {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100%;
+  text-align: center;
+  font-size: 17px;
+}
+.footer-list ul p {
+  margin-top: 0px;
+  margin-bottom: 10px;
+}
+.footer-list ul i {
+  font-size: 28px;
+  margin-top: 9px;
+}

src/main.ts

@@ -1,7 +1,9 @@
+import './assets/main.css'
+import './assets/css/navbottom.css'
+
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import { Button } from '@nutui/nutui'
-import '@nutui/nutui/dist/style.css'
+
 
 import App from './App.vue'
 import router from './router'
@@ -10,6 +12,17 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
-app.use(Button)
+
 
 app.mount('#app')
+
+
+/**
+ * 常规引入 Vant
+ */
+// // 1. 引入你需要的组件
+// import { Button } from 'vant'
+// // 2. 引入组件样式
+// import 'vant/lib/index.css'
+// // 3. 注册你需要的组件
+// app.use(Button)

src/router/index.ts

@@ -1,20 +1,44 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeIndex from '@/views/home/HomeIndex.vue'
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import HomeIndex from '../views/home/HomeIndex.vue'
+
+const routes: Array<RouteRecordRaw> = [ // RouteRecordRaw Vue Router 中用于定义路由的接口
+  {
+    path: "/",
+    redirect: "/home"
+  },
+  {
+    path: '/home', // 首页
+    name: 'home',
+    component: HomeIndex
+  },
+  {
+    path: '/trading', // 交易
+    name: 'trading',
+    // route level code-splitting
+    // this generates a separate chunk (About.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import('../views/trading/TradingIndex.vue')
+  },
+  {
+    path: '/position', // 持仓
+    name: 'position',
+    component: () => import('../views/position/PostionIndex.vue')
+  },
+  {
+    path: '/my', // 我的
+    name: 'my',
+    component: () => import('../views/my/MyIndex.vue')
+  },
+  {
+    path: '/about', // 关于
+    name: 'about',
+    component: () => import('../views/my/MyAbout.vue')
+  }
+]
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'home',
-      component: HomeIndex
-    },
-    {
-      path: '/my',
-      name: 'my',
-      component: () => import('@/views/my/MyIndex.vue')
-    }
-  ]
+  history: createWebHistory(),
+  routes // 同名简写，routes: routes
 })
 
 export default router

src/views/Navbottom.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+let footerlist = ref([
+    { title: '首页', icon: 'van-badge__wrapper van-icon van-icon-wap-home-o' },
+    { title: '交易', icon: 'van-badge__wrapper van-icon van-icon-gold-coin-o' },
+    { title: '持仓', icon: 'van-badge__wrapper van-icon van-icon-paid' },
+    { title: '我的', icon: 'van-badge__wrapper van-icon van-icon-user-o' },
+])
+</script>
+
+<template>
+    <div class="footer">
+        <div class="footer-seat">
+            <div class="footer-list">
+                <ul>
+                    <li v-for="(obj, index) in footerlist" :key="index">
+                        <i :class="obj.icon"></i>
+                        <p>{{ obj.title }}</p>
+                    </li>
+
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped></style>

src/views/home/HomeIndex.vue

@@ -5,12 +5,6 @@
     <div class="home">
         <h1>This is home page</h1>
         你好你好
-        <nut-button type="primary">Primary</nut-button>
-        <nut-button type="info">Info</nut-button>
-        <nut-button type="default">Default</nut-button>
-        <nut-button type="danger">Danger</nut-button>
-        <nut-button type="warning">Warning</nut-button>
-        <nut-button type="success">Success</nut-button>
     </div>
 
 </template>

src/views/my/MyIndex.vue

@@ -3,7 +3,7 @@
 
 <template>
     <div class="my">
-        <h1>This is my page</h1>
+        <h1>My</h1>
     </div>
     <!-- <main>
         <TheWelcome />

src/views/position/PostionIndex.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="my">
+        <h1>Position</h1>
+    </div>
+</template>
+
+<style></style>

src/views/trading/TradingIndex.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <div class="my">
+        <h1>Trading</h1>
+    </div>
+</template>
+
+<style></style>

vite.config.ts

@@ -2,12 +2,24 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import Components from 'unplugin-vue-components/vite'
+import { VantResolver } from '@vant/auto-import-resolver'
 
+// https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [VantResolver()],
+    }),
+  ],
+  server:{
+    open: true, // 自动浏览
+    port: 5173
+  },
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
+      '@': fileURLToPath(new URL('./src', import.meta.url)) // 将@映射为src根路径
     }
   }
 })