пре 4 година · eb2725beef
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
 
				+# Logs
			
 
				+logs
			
 
				+*.log
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+lerna-debug.log*
			
 
				+
			
 
				+node_modules
			
 
				+dist
			
 
				+dist-ssr
			
 
				+*.local
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.vscode/*
			
 
				+!.vscode/extensions.json
			
 
				+.idea
			
 
				+.DS_Store
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
 
				-# toy_box_website_2
			
 
				+# toy_box_website
			
 
				+
			
 
				+潮玩的官网网页
			
 
				+使用 vue3 + ts + vuex + elementUI  + vite
			
 
				 
			
 
				-潮玩官网
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,21 @@
 
				+<!--
			
 
				+ * @description: 
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-12 17:58:56
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-14 14:22:37
			
 
				+ * @FilePath: \toy_box_website\index.html
			
 
				+-->
			
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+    <head>
			
 
				+        <meta charset="UTF-8" />
			
 
				+        <link rel="icon" href="/favicon.ico" />
			
 
				+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
			
 
				+        <title>Vite App</title>
			
 
				+    </head>
			
 
				+    <body style="margin: 0">
			
 
				+        <div id="app"></div>
			
 
				+        <script type="module" src="/src/main.ts"></script>
			
 
				+    </body>
			
 
				+</html>
			
--- a/myShowWeb/README.md
+++ b/myShowWeb/README.md
@@ -0,0 +1,16 @@
 
				+# Vue 3 + Typescript + Vite
			
 
				+
			
 
				+This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
			
 
				+
			
 
				+## Recommended IDE Setup
			
 
				+
			
 
				+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
			
 
				+
			
 
				+## Type Support For `.vue` Imports in TS
			
 
				+
			
 
				+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
			
 
				+
			
 
				+1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
			
 
				+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
			
 
				+
			
 
				+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,23 @@
 
				+{
			
 
				+  "name": "myshowweb",
			
 
				+  "private": true,
			
 
				+  "version": "0.0.0",
			
 
				+  "scripts": {
			
 
				+    "dev": "vite",
			
 
				+    "build": "vue-tsc --noEmit && vite build",
			
 
				+    "preview": "vite preview"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "less": "^4.1.2",
			
 
				+    "vue": "^3.2.25",
			
 
				+    "vue-router": "4",
			
 
				+    "vuex": "^4.0.2"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@types/node": "^17.0.24",
			
 
				+    "@vitejs/plugin-vue": "^2.3.0",
			
 
				+    "typescript": "^4.5.4",
			
 
				+    "vite": "^2.9.0",
			
 
				+    "vue-tsc": "^0.29.8"
			
 
				+  }
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,31 @@
 
				+<!--
			
 
				+ * @description: 
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-12 17:58:56
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-14 14:18:53
			
 
				+ * @FilePath: \toy_box_website\src\App.vue
			
 
				+-->
			
 
				+<template>
			
 
				+    <router-view />
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts">
			
 
				+import { defineComponent } from "@vue/runtime-core";
			
 
				+export default defineComponent({
			
 
				+    name: "App",
			
 
				+    created() {
			
 
				+        // 更合适的使用方式是在router 里配置  path 为 / 的路由，成为默认的首页
			
 
				+        // this.$router.replace("/page/home")
			
 
				+    },
			
 
				+    mounted() {
			
 
				+        setTimeout(() => this.$router.replace("/page/home"), 1000);
			
 
				+    },
			
 
				+});
			
 
				+</script>
			
 
				+
			
 
				+<style>
			
 
				+#app {
			
 
				+    /* margin-top: 60px; */
			
 
				+}
			
 
				+</style>
			
--- a/src/assets/1.png
+++ b/src/assets/1.png
--- a/src/assets/10.png
+++ b/src/assets/10.png
--- a/src/assets/11.png
+++ b/src/assets/11.png
--- a/src/assets/12.png
+++ b/src/assets/12.png
--- a/src/assets/13.png
+++ b/src/assets/13.png
--- a/src/assets/14.png
+++ b/src/assets/14.png
--- a/src/assets/15.png
+++ b/src/assets/15.png
--- a/src/assets/2.png
+++ b/src/assets/2.png
--- a/src/assets/3.png
+++ b/src/assets/3.png
--- a/src/assets/4.png
+++ b/src/assets/4.png
--- a/src/assets/5.png
+++ b/src/assets/5.png
--- a/src/assets/6.png
+++ b/src/assets/6.png
--- a/src/assets/7.png
+++ b/src/assets/7.png
--- a/src/assets/8.png
+++ b/src/assets/8.png
--- a/src/assets/9.png
+++ b/src/assets/9.png
--- a/src/assets/btnSearch.png
+++ b/src/assets/btnSearch.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/poster.png
+++ b/src/assets/poster.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,63 @@
 
				+<!--
			
 
				+ * @description: 
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-12 17:58:56
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-12 19:15:54
			
 
				+ * @FilePath: \toy_box_website\src\components\HelloWorld.vue
			
 
				+-->
			
 
				+<script lang="ts">
			
 
				+export default {
			
 
				+    props: {
			
 
				+        msg: String,
			
 
				+    },
			
 
				+    data() {
			
 
				+        return {
			
 
				+            count: 0,
			
 
				+        };
			
 
				+    },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<template>
			
 
				+    <h1>{{ msg }}</h1>
			
 
				+
			
 
				+    <p>
			
 
				+        Recommended IDE setup:
			
 
				+        <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
			
 
				+        +
			
 
				+        <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
			
 
				+    </p>
			
 
				+
			
 
				+    <p>See <code>README.md</code> for more information.</p>
			
 
				+
			
 
				+    <p>
			
 
				+        <a href="https://vitejs.dev/guide/features.html" target="_blank"> Vite Docs </a>
			
 
				+        |
			
 
				+        <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
			
 
				+    </p>
			
 
				+
			
 
				+    <button type="button" @click="count++">count is: {{ count }}</button>
			
 
				+    <p>
			
 
				+        Edit
			
 
				+        <code>components/HelloWorld.vue</code> to test hot module replacement.
			
 
				+    </p>
			
 
				+</template>
			
 
				+
			
 
				+<style scoped>
			
 
				+a {
			
 
				+    color: #42b983;
			
 
				+}
			
 
				+
			
 
				+label {
			
 
				+    margin: 0 0.5em;
			
 
				+    font-weight: bold;
			
 
				+}
			
 
				+
			
 
				+code {
			
 
				+    background-color: #eee;
			
 
				+    padding: 2px 4px;
			
 
				+    border-radius: 4px;
			
 
				+    color: #304455;
			
 
				+}
			
 
				+</style>
			
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -0,0 +1,8 @@
 
				+/// <reference types="vite/client" />
			
 
				+
			
 
				+declare module '*.vue' {
			
 
				+  import type { DefineComponent } from 'vue'
			
 
				+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
			
 
				+  const component: DefineComponent<{}, {}, any>
			
 
				+  export default component
			
 
				+}
			
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,14 @@
 
				+/**
			
 
				+ * @description:
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-12 17:58:56
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-13 17:27:17
			
 
				+ * @FilePath: \toy_box_website\src\main.ts
			
 
				+ */
			
 
				+import { createApp } from "vue";
			
 
				+import App from "./App.vue";
			
 
				+import { router } from "./router";
			
 
				+import store from "./store";
			
 
				+
			
 
				+createApp(App).use(store).use(router).mount("#app");
			
--- a/src/page/detail/index.vue
+++ b/src/page/detail/index.vue
@@ -0,0 +1,27 @@
 
				+<!--
			
 
				+ * @description: 
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-13 17:29:36
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-14 09:47:50
			
 
				+ * @FilePath: \toy_box_website\src\page\detail\index.vue
			
 
				+-->
			
 
				+
			
 
				+<template>
			
 
				+    <div class="detailPage" @click="$router.back()">新的页面, 点击返回</div>
			
 
				+</template>
			
 
				+<script lang="ts">
			
 
				+import { defineComponent } from "@vue/runtime-core";
			
 
				+
			
 
				+export default defineComponent({
			
 
				+    name: "Detail",
			
 
				+});
			
 
				+</script>
			
 
				+<style scoped>
			
 
				+.detailPage {
			
 
				+    width: 100vw;
			
 
				+    height: 100vh;
			
 
				+    background-color: yellowgreen;
			
 
				+    cursor: pointer;
			
 
				+}
			
 
				+</style>
			
--- a/src/page/home/Goods.vue
+++ b/src/page/home/Goods.vue
@@ -0,0 +1,95 @@
 
				+<!--
			
 
				+ * @description: 
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-14 15:49:03
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-14 16:31:11
			
 
				+ * @FilePath: \toy_box_website\src\page\home\Goods.vue
			
 
				+-->
			
 
				+
			
 
				+<template>
			
 
				+    <div class="goods">
			
 
				+        <div class="item" v-for="(item, index) in showGoods" :key="index">
			
 
				+            <img :src="item.imgSrc" alt="" />
			
 
				+            <span class="name">{{ item.name }}}</span>
			
 
				+            <span class="price">￥{{ item.price.toFixed(2) }}</span>
			
 
				+        </div>
			
 
				+
			
 
				+        <span class="noneTip" v-if="showGoods.length == 0">没有商品哦</span>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts">
			
 
				+import { defineComponent } from "@vue/runtime-core";
			
 
				+import store from "../../store";
			
 
				+
			
 
				+export default defineComponent({
			
 
				+    name: "Goods",
			
 
				+    data() {
			
 
				+        return {};
			
 
				+    },
			
 
				+    computed: {
			
 
				+        /**
			
 
				+         * 过滤显示的商品数据
			
 
				+         */
			
 
				+        showGoods() {
			
 
				+            return store.state.allGoods.filter((item) => item.name.indexOf(store.state.searchGoodsName) != -1);
			
 
				+        },
			
 
				+    },
			
 
				+    methods: {},
			
 
				+});
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.goods {
			
 
				+    // height: calc(~"100vh - 400px");
			
 
				+    display: flex;
			
 
				+    align-self: center;
			
 
				+    flex-direction: row;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    width: 1400px;
			
 
				+    flex-wrap: wrap;
			
 
				+    margin-top: 30px;
			
 
				+
			
 
				+    .item {
			
 
				+        width: 225px;
			
 
				+        height: 240px;
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        align-items: flex-start;
			
 
				+        background-color: #fff;
			
 
				+        margin-right: 20px;
			
 
				+        margin-bottom: 20px;
			
 
				+
			
 
				+        .price {
			
 
				+            color: #ff6c4f;
			
 
				+            margin-left: 10px;
			
 
				+        }
			
 
				+        .name {
			
 
				+            text-overflow: ellipsis;
			
 
				+            overflow: hidden;
			
 
				+            display: -webkit-box;
			
 
				+            // 超过两行就显示。。。
			
 
				+            -webkit-line-clamp: 2;
			
 
				+            -webkit-box-orient: vertical;
			
 
				+
			
 
				+            margin: 10px;
			
 
				+        }
			
 
				+
			
 
				+        img {
			
 
				+            height: 146px;
			
 
				+            align-self: center;
			
 
				+        }
			
 
				+
			
 
				+        &:hover {
			
 
				+            cursor: pointer;
			
 
				+            box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
			
 
				+        }
			
 
				+    }
			
 
				+
			
 
				+    .noneTip {
			
 
				+        font-size: 20px;
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/page/home/Head.vue
+++ b/src/page/home/Head.vue
@@ -0,0 +1,114 @@
 
				+<!--
			
 
				+ * @description: 
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-14 14:33:39
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-14 16:03:24
			
 
				+ * @FilePath: \toy_box_website\src\page\home\Head.vue
			
 
				+-->
			
 
				+<template>
			
 
				+    <div class="head">
			
 
				+        <img class="logo" src="/src/assets/logo.png" />
			
 
				+        <span class="item">商店</span>
			
 
				+        <span class="item">福袋</span>
			
 
				+        <span class="item">福利</span>
			
 
				+        <span class="item">邀请</span>
			
 
				+        <span class="item">账户充值</span>
			
 
				+
			
 
				+        <div class="inputArea" @click="onBtnSearchClick">
			
 
				+            <input placeholder="搜索您想要的商品" :value="inputStr" :oninput="onInputChange" />
			
 
				+            <div class="searchBtn">
			
 
				+                <img class="icon" src="/src/assets/btnSearch.png" />
			
 
				+            </div>
			
 
				+        </div>
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts">
			
 
				+import { defineComponent } from "@vue/runtime-core";
			
 
				+import store from "../../store";
			
 
				+
			
 
				+export default defineComponent({
			
 
				+    name: "Head",
			
 
				+    data() {
			
 
				+        return {
			
 
				+            inputStr: "", // 接受输入的值
			
 
				+        };
			
 
				+    },
			
 
				+    methods: {
			
 
				+        /**
			
 
				+         * 当输入改变
			
 
				+         */
			
 
				+        onInputChange(e: { target: { value: string } }) {
			
 
				+            console.log(e.target.value);
			
 
				+            this.inputStr = e.target.value;
			
 
				+
			
 
				+            store.commit("setSearchGoodsName", this.inputStr);
			
 
				+        },
			
 
				+
			
 
				+        /**
			
 
				+         * 点击搜索按钮
			
 
				+         */
			
 
				+        onBtnSearchClick() {
			
 
				+            console.log("点击搜索按钮:", this.inputStr);
			
 
				+        },
			
 
				+    },
			
 
				+});
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.head {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    height: 60px;
			
 
				+    // border: solid 1px red;
			
 
				+    background-color: #0f0f0f;
			
 
				+    width: 100%;
			
 
				+
			
 
				+    .logo {
			
 
				+        width: 253px;
			
 
				+        height: 60px;
			
 
				+    }
			
 
				+
			
 
				+    .item {
			
 
				+        margin-left: 20px;
			
 
				+        margin-right: 20px;
			
 
				+    }
			
 
				+
			
 
				+    span {
			
 
				+        color: #fff;
			
 
				+    }
			
 
				+    .inputArea {
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        width: 300px;
			
 
				+        height: 40px;
			
 
				+        border-radius: 5px;
			
 
				+        background-color: #fff;
			
 
				+
			
 
				+        input {
			
 
				+            height: 38px;
			
 
				+            background-color: transparent;
			
 
				+            width: 100%;
			
 
				+            &::placeholder {
			
 
				+                margin-left: 30px;
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        .searchBtn {
			
 
				+            display: flex;
			
 
				+            justify-content: center;
			
 
				+            align-items: center;
			
 
				+            background: linear-gradient(315deg, #f53932, #ff6a50);
			
 
				+            border-radius: 0 5px 5px 0;
			
 
				+            width: 52px;
			
 
				+            height: 40px;
			
 
				+            &:hover {
			
 
				+                cursor: pointer;
			
 
				+            }
			
 
				+        }
			
 
				+    }
			
 
				+}
			
 
				+</style>
			
--- a/src/page/home/Tabs.vue
+++ b/src/page/home/Tabs.vue
@@ -0,0 +1,36 @@
 
				+<!--
			
 
				+ * @description: 
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-14 14:33:39
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-14 16:03:38
			
 
				+ * @FilePath: \toy_box_website\src\page\home\Tabs.vue
			
 
				+-->
			
 
				+<template>
			
 
				+    <div class="tabs" style=""></div>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts">
			
 
				+import { defineComponent } from "@vue/runtime-core";
			
 
				+
			
 
				+export default defineComponent({
			
 
				+    name: "Tabs",
			
 
				+    data() {
			
 
				+        return {};
			
 
				+    },
			
 
				+    methods: {},
			
 
				+});
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.tabs {
			
 
				+    display: flex;
			
 
				+    flex-direction: row;
			
 
				+    align-items: center;
			
 
				+    justify-content: center;
			
 
				+    height: 420px;
			
 
				+    width: 100%;
			
 
				+    background: url("/src/assets/poster.png") no-repeat;
			
 
				+    background-size: 100vw, 420px;
			
 
				+}
			
 
				+</style>
			
--- a/src/page/home/index.vue
+++ b/src/page/home/index.vue
@@ -0,0 +1,101 @@
 
				+<!--
			
 
				+ * @description: 
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-13 18:00:09
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-14 16:04:16
			
 
				+ * @FilePath: \toy_box_website\src\page\home\index.vue
			
 
				+-->
			
 
				+
			
 
				+<template>
			
 
				+    <div class="home">
			
 
				+        <HeadVue />
			
 
				+        <TabsVue />
			
 
				+        <GoodsVue />
			
 
				+    </div>
			
 
				+</template>
			
 
				+
			
 
				+<script lang="ts">
			
 
				+import { defineComponent } from "@vue/runtime-core";
			
 
				+import store, { IGoods } from "../../store";
			
 
				+import GoodsVue from "./Goods.vue";
			
 
				+import HeadVue from "./Head.vue";
			
 
				+import TabsVue from "./Tabs.vue";
			
 
				+
			
 
				+export default defineComponent({
			
 
				+    name: "Home",
			
 
				+    components: {
			
 
				+        HeadVue,
			
 
				+        TabsVue,
			
 
				+        GoodsVue,
			
 
				+    },
			
 
				+
			
 
				+    mounted() {
			
 
				+        const goods = [
			
 
				+            {
			
 
				+                name: "【元气福袋】超值盲盒大礼包+随机礼品（价值175~288）",
			
 
				+                price: 99,
			
 
				+                imgSrc: "https://static.airmart.top/mall/6248329b36865f004fc7b6cd.png",
			
 
				+            },
			
 
				+            {
			
 
				+                name: "【元气福袋】超值！正版热血动漫礼包 扭蛋 盒蛋 景品（价值240~380）",
			
 
				+                price: 199,
			
 
				+                imgSrc: "https://static.airmart.top/mall/624832db36865f004fc7b6ce.png",
			
 
				+            },
			
 
				+            {
			
 
				+                name: "【万代授权】UR 迪迦奥特曼 迪加 火花棱镜神光棒 25周年纪念现货 ",
			
 
				+                price: 809,
			
 
				+                imgSrc: "https://static.airmart.top/mall/61f2532b871a2500503c1e83.png",
			
 
				+            },
			
 
				+            {
			
 
				+                name: "HGUC 机动战士高达 逆袭的夏亚 MSN-04II 夜莺",
			
 
				+                price: 479,
			
 
				+                imgSrc: "https://static.airmart.top/mall/61d577a71a5ae600511a3c8a.png",
			
 
				+            },
			
 
				+            {
			
 
				+                name: "迪士尼 星黛露 发饰",
			
 
				+                price: 119,
			
 
				+                imgSrc: "https://static.airmart.top/mall/622c75232bcd8900631850bd.png",
			
 
				+            },
			
 
				+            {
			
 
				+                name: "万代模型 Figure-rise Standard 星野文乃 高达创战者",
			
 
				+                price: 166,
			
 
				+                imgSrc: "https://static.airmart.top/mall/623d796a2b212500776ace9a.png",
			
 
				+            },
			
 
				+            {
			
 
				+                name: "HotToys 蝙蝠侠黑暗骑士 COSBABY 迷你人偶 钥匙扣挂件（随机）",
			
 
				+                price: 89,
			
 
				+                imgSrc: "https://static.airmart.top/mall/623991bb61bab600782a3e5e.png",
			
 
				+            },
			
 
				+            {
			
 
				+                name: "米哈游/崩坏3】女武神武器金属挂件钥匙扣",
			
 
				+                price: 59,
			
 
				+                imgSrc: "https://static.airmart.top/mall/61d815f5d2314e00577b1b4f.png",
			
 
				+            },
			
 
				+            {
			
 
				+                name: "【米哈游/崩坏3】德丽莎沙雕亚克力挂件(款式随机）",
			
 
				+                price: 49,
			
 
				+                imgSrc: "https://static.airmart.top/mall/61d80f6c1a5ae600511a3cd3.png",
			
 
				+            },
			
 
				+            {
			
 
				+                name: "【米哈游/崩坏3】火星新春表情包PVC贴纸包",
			
 
				+                price: 49,
			
 
				+                imgSrc: "https://static.airmart.top/mall/61d80f0ad83c0b004f405a37.png",
			
 
				+            },
			
 
				+        ] as IGoods[];
			
 
				+        store.commit("setGoods", goods);
			
 
				+    },
			
 
				+});
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.home {
			
 
				+    display: flex;
			
 
				+    flex-direction: column;
			
 
				+    align-items: center;
			
 
				+    width: 100vw;
			
 
				+    height: 100vh;
			
 
				+
			
 
				+    background-color: #f5f5f5;
			
 
				+}
			
 
				+</style>
			
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,32 @@
 
				+/**
			
 
				+ * @description:
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-13 17:15:34
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-14 09:57:12
			
 
				+ * @FilePath: \toy_box_website\src\router\index.ts
			
 
				+ */
			
 
				+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
			
 
				+// 1. 定义路由组件.
			
 
				+// 也可以从其他文件导入
			
 
				+import Detail from "../page/detail/index.vue";
			
 
				+import Home from "../page/home/index.vue";
			
 
				+
			
 
				+// 2. 定义一些路由
			
 
				+// 每个路由都需要映射到一个组件。
			
 
				+// 我们后面再讨论嵌套路由。
			
 
				+const routes: RouteRecordRaw[] = [
			
 
				+    { name: "home", path: "/page/home", component: Home },
			
 
				+    { name: "detail", path: "/page/detail", component: Detail },
			
 
				+];
			
 
				+
			
 
				+// 3. 创建路由实例并传递 `routes` 配置
			
 
				+// 你可以在这里输入更多的配置，但我们在这里
			
 
				+// 暂时保持简单
			
 
				+const router = createRouter({
			
 
				+    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
			
 
				+    history: createWebHashHistory(),
			
 
				+    routes, // `routes: routes` 的缩写
			
 
				+});
			
 
				+
			
 
				+export { router };
			
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -0,0 +1,48 @@
 
				+/**
			
 
				+ * @description:
			
 
				+ * @Author: uray(1109489444@qq.com)
			
 
				+ * @date: 2022-04-13 17:03:49
			
 
				+ * @lastEditors: uray(1109489444@qq.com)
			
 
				+ * @lastEditTime: 2022-04-14 15:52:59
			
 
				+ * @FilePath: \toy_box_website\src\store\index.ts
			
 
				+ */
			
 
				+import { createStore } from "vuex";
			
 
				+
			
 
				+export interface IGoods {
			
 
				+    name: string;
			
 
				+    price: number;
			
 
				+    imgSrc: string;
			
 
				+}
			
 
				+interface IState {
			
 
				+    allGoods: IGoods[];
			
 
				+    searchGoodsName: string;
			
 
				+}
			
 
				+// 创建一个新的 store 实例
			
 
				+const store = createStore({
			
 
				+    state() {
			
 
				+        return {
			
 
				+            allGoods: [],
			
 
				+            searchGoodsName: "", // 搜索的商品名称
			
 
				+        };
			
 
				+    },
			
 
				+    mutations: {
			
 
				+        /**
			
 
				+         * 设置新的数据源
			
 
				+         * @param state
			
 
				+         * @param newGoods
			
 
				+         */
			
 
				+        setGoods(state: IState, newGoods) {
			
 
				+            state.allGoods = newGoods;
			
 
				+        },
			
 
				+        /**
			
 
				+         * 设置新的搜索名字
			
 
				+         * @param state
			
 
				+         * @param newName
			
 
				+         */
			
 
				+        setSearchGoodsName(state: IState, newName) {
			
 
				+            state.searchGoodsName = newName;
			
 
				+        },
			
 
				+    },
			
 
				+});
			
 
				+
			
 
				+export default store;
			
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,17 @@
 
				+{
			
 
				+  "compilerOptions": {
			
 
				+    "target": "esnext",
			
 
				+    "useDefineForClassFields": true,
			
 
				+    "module": "esnext",
			
 
				+    "moduleResolution": "node",
			
 
				+    "strict": true,
			
 
				+    "jsx": "preserve",
			
 
				+    "sourceMap": true,
			
 
				+    "resolveJsonModule": true,
			
 
				+    "isolatedModules": true,
			
 
				+    "esModuleInterop": true,
			
 
				+    "lib": ["esnext", "dom"]
			
 
				+  },
			
 
				+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
			
 
				+  "references": [{ "path": "./tsconfig.node.json" }]
			
 
				+}
			
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,8 @@
 
				+{
			
 
				+  "compilerOptions": {
			
 
				+    "composite": true,
			
 
				+    "module": "esnext",
			
 
				+    "moduleResolution": "node"
			
 
				+  },
			
 
				+  "include": ["vite.config.ts"]
			
 
				+}
			
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
 
				+import { defineConfig } from 'vite'
			
 
				+import vue from '@vitejs/plugin-vue'
			
 
				+
			
 
				+// https://vitejs.dev/config/
			
 
				+export default defineConfig({
			
 
				+  plugins: [vue()]
			
 
				+})
			
--- a/yarn.lock
+++ b/yarn.lock