diff --git a/package-lock.json b/package-lock.json index 799ecfe..5e02329 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "dependencies": { "pinia": "^2.0.21", + "vant": "^4.0.11", "vue": "^3.2.38", "vue-router": "^4.1.6" }, @@ -73,6 +74,16 @@ "node": ">=12" } }, + "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.0", + "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.5.0.tgz", + "integrity": "sha512-Dk7aMn7gLpoDew2tix/mjXpP0PoERWcxWh+pRY4xxl0MG4eeByAAyZSE6PgMpof4Yorqn7yq8KmeQcaVnxq2cg==" + }, "node_modules/@vitejs/plugin-vue": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz", @@ -808,6 +819,18 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/vant": { + "version": "4.0.11", + "resolved": "https://registry.npmjs.org/vant/-/vant-4.0.11.tgz", + "integrity": "sha512-axVP6eHH4vGb5FQ2hqNhB5DykMSBQb0KK97HT4bVVFTYM81EJq1YImqOglzsVt3OC98NRoT01DIwt4y2n1iwVw==", + "dependencies": { + "@vant/popperjs": "^1.3.0", + "@vant/use": "^1.5.0" + }, + "peerDependencies": { + "vue": "^3.0.0" + } + }, "node_modules/vconsole": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.0.tgz", @@ -925,6 +948,16 @@ "dev": true, "optional": true }, + "@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.0", + "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.5.0.tgz", + "integrity": "sha512-Dk7aMn7gLpoDew2tix/mjXpP0PoERWcxWh+pRY4xxl0MG4eeByAAyZSE6PgMpof4Yorqn7yq8KmeQcaVnxq2cg==" + }, "@vitejs/plugin-vue": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz", @@ -1363,6 +1396,15 @@ "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "dev": true }, + "vant": { + "version": "4.0.11", + "resolved": "https://registry.npmjs.org/vant/-/vant-4.0.11.tgz", + "integrity": "sha512-axVP6eHH4vGb5FQ2hqNhB5DykMSBQb0KK97HT4bVVFTYM81EJq1YImqOglzsVt3OC98NRoT01DIwt4y2n1iwVw==", + "requires": { + "@vant/popperjs": "^1.3.0", + "@vant/use": "^1.5.0" + } + }, "vconsole": { "version": "3.15.0", "resolved": "https://registry.npmjs.org/vconsole/-/vconsole-3.15.0.tgz", diff --git a/package.json b/package.json index bd96189..1e140e5 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ }, "dependencies": { "pinia": "^2.0.21", + "vant": "^4.0.11", "vue": "^3.2.38", "vue-router": "^4.1.6" }, diff --git a/src/App.vue b/src/App.vue index 1b1ca22..402f624 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,38 +1,8 @@ - diff --git a/src/assets/main.css b/src/assets/main.css index f841fc6..a76a372 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,8 +1,6 @@ @import "./base.css"; #app { - padding: 50px; - font-weight: normal; } /* 设置滚动条的样式 */ diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 0a0988b..0000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - - - diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index 5e64625..0000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def3..0000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/layout/Default.vue b/src/layout/Default.vue new file mode 100644 index 0000000..d5d488a --- /dev/null +++ b/src/layout/Default.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/src/layout/Pure.vue b/src/layout/Pure.vue new file mode 100644 index 0000000..e263ac8 --- /dev/null +++ b/src/layout/Pure.vue @@ -0,0 +1,7 @@ + + + diff --git a/src/main.js b/src/main.js index 000f59f..cf65ab3 100644 --- a/src/main.js +++ b/src/main.js @@ -5,11 +5,10 @@ import App from './App.vue' import router from './router' import './assets/main.css' +import 'vant/lib/index.css'; import VConsole from 'vconsole'; -const vConsole = new VConsole(); - const app = createApp(App) app.use(createPinia()) diff --git a/src/router/index.js b/src/router/index.js index 1184a2f..6b0a6e6 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,21 +1,39 @@ import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router' -import HomeView from '../views/HomeView.vue' +import Default from "@/layout/Default.vue"; +import Pure from "@/layout/Pure.vue"; const router = createRouter({ history: createWebHashHistory(import.meta.env.BASE_URL), routes: [ { path: '/', - name: 'home', - component: HomeView + component: Default, + children: [ + { + path: '', + name: 'home', + component: () => import('../views/HomeView.vue') + }, + { + path: 'calc', + name: 'calc', + component: () => import('../views/CalcView.vue') + }, + { + path: 'webview/:page', + component: () => import('../views/Webview.vue'), + }, + ] }, { - path: '/calc', - name: 'calc', - // 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/CalcView.vue') + path: '/pure', + name: 'pure', + component: Pure, // 多嵌套了一层组件，方便对webview组件进行统一管理 + children: [{ + path: 'cart', + name: "cart", + component: () => import('../views/CartView.vue') + }], } ] }) diff --git a/src/router/menu.js b/src/router/menu.js new file mode 100644 index 0000000..b4f9f66 --- /dev/null +++ b/src/router/menu.js @@ -0,0 +1,5 @@ +export default [ + {title: "首页", path: '/'}, + {title: "计算器", path: '/calc'}, + {title: "购物车", path: '/webview/cart'}, +] diff --git a/src/views/CalcView.vue b/src/views/CalcView.vue index 6f547b3..7753829 100644 --- a/src/views/CalcView.vue +++ b/src/views/CalcView.vue @@ -83,6 +83,7 @@ const clear = function () { .view input { width: 100%; height: 100%; + font-size: 30px; } .btn { diff --git a/src/views/CartView.vue b/src/views/CartView.vue new file mode 100644 index 0000000..175115e --- /dev/null +++ b/src/views/CartView.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 483e7bc..687f9af 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,9 +1,8 @@ - - + + diff --git a/src/views/Webview.vue b/src/views/Webview.vue new file mode 100644 index 0000000..7af8634 --- /dev/null +++ b/src/views/Webview.vue @@ -0,0 +1,26 @@ + + + + +