【Vue】移动端项目流程
移动端项目
O 项目技术栈说明
- 脚手架： Vite 3
还有 vue-cli - 底层 webpack
- 脚本：typescript
- 路由：vue-router4
- 状态管理器： vuex4
还有 pinia
- 组件库：[email protected]
- 组件API：选项式API
一、Vite 脚手架的使用
官网：https://vitejs.cn/
vue3 Vite官网：https://cn.vitejs.dev/
Vite 下一代的前端工具链 为开发提供极速响应
$ cnpm i vite -g
1.1 介绍
Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
1.2 搭建vue3项目
1.2.1 vite官方建议
使用 NPM:
$ npm create vite@latest使用 Yarn: 如果电脑尚未安装yarn，可通过
cnpm i yarn -g完成安装$ yarn create vite使用 PNPM: 如果电脑尚未安装pnpm，可通过
cnpm i pnpm -g完成安装$ pnpm create vite然后按照提示操作即可！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Prq95Hvt-1673602369087)(assets/image-20220923090140128.png)]
1.2.2 vue官网生态系统建议
vue脚手架
要使用 Vite 来创建一个 Vue 项目，非常简单
$ npm init vue@latest
这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。
√ Project name: ... mobile-vue-app # 输入项目名称
√ Add TypeScript? ... No / Yes # Yes 选择使用ts
√ Add JSX Support? ... No / Yes # Yes 选择使用jsx支持
√ Add Vue Router for Single Page Application development? ... No / Yes # Yes 选择使用vue路由
√ Add Pinia for state management? ... No / Yes # No 后期使用vuex作为状态管理器
√ Add Vitest for Unit Testing? ... No / Yes # No 不选择测试
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes # No 不选择
√ Add ESLint for code quality? ... No / Yes # Yes 选择代码格式校验
√ Add Prettier for code formatting? ... No / Yes # Yes 选择Prettier作为代码格式规范
$ cd mobile-vue-app # 进入项目目录
$ npm i # 安装依赖 如果安装出错，建议可以考虑使用手机热点安装
$ npm run lint # 代码格式校验
$ npm run dev # 启动项目
如果同局域网内想要通过ip地址访问项目，可以修改 运行命令
// package.json { ..., "scripts": { "dev": "vite"// ----- "dev": "vite --host" // +++++ ..., }, .... }
1.3 目录结构分析
|- mobile-vue-app # 项目名称
|- .vscode
|- node_modules # 项目依赖
|- public # 图标文件夹
favicon.ico # 网页图标
|- src # 写代码主场
|- assets # 资源文件
base.css # 基础样式
logo.svg # logo
main.css # 项目样式
|- components # 自定义组件
|- icons # 图标组件
HelloWorld.vue # 自定义组件
TheWelcome.vue # 自定义组件
WelcomeItem.vue # 自定义组件
|- router # 路由文件夹
index.ts # 路由的配置
|- views # 项目页面组件
AboutView.vue # 页面组件
HomeView.vue # 页面组件
App.vue # 项目根组件
main.ts # 项目入口文件
.eslintrc.cjs # 代码格式化规则
.gitignore # git上传忽略文件
.prettierrc.json # 右键格式化的时候,就会自动帮我们补全符号
.env.d.ts # 环境配置声明文件
index.html # 页面的模板
package.json # 项目依赖说明
README.md # 说明文档
tsconfig.config.json # ts配置文件说明
tsconfig.json # ts配置文件
vite.config.ts # vite配置文件
二、Vue3单文件组件
1.SFC语法定义
一个 Vue 单文件组件 (SFC)，通常使用 *.vue 作为文件扩展名，它是一种使用了类似 HTML 语法的自定义文件格式，用于定义 Vue 组件。一个 Vue 单文件组件在语法上是兼容 HTML 的。
每一个 *.vue 文件都由三种顶层语言块构成：、
打开 main.ts 发现 引入App.vue 的地方画红线，说明项目中没有说明 .vue文件的声明文件
// src/env.d.ts
/// 再次打开main.ts 发现，红线消失
复制项目src文件夹，然后保留App.vue以及main.ts的基本内容
// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
选项式API
{{ msg }} --- {{ count }}
vue 组合式API
{{ msg }} --- {{ count }}
组合式API简写形式
{{ msg }} --- {{ count }}
说明：如果使用 js 作为脚本语言，是不需要引入
import { defineComponent } from 'vue'的，组件中只需要 通过export defaut {}作为组件的js逻辑即可
2.相应语言块（template、script、style）
2.1 template
- 每个
*.vue文件最多可以包含一个顶层块。 - 语块包裹的内容将会被提取、传递给
@vue/compiler-dom，预编译为 JavaScript 渲染函数，并附在导出的组件上作为其render选项。
2.2 script
- 每个
*.vue文件最多可以包含一个请注意
src导入和 JS 模块导入遵循相同的路径解析规则，这意味着：- 相对路径需要以
./开头
5. 注释
在每一个语块中你都可以按照相应语言 (HTML、CSS、JavaScript 和 Pug 等等) 的语法书写注释。对于顶层注释，请使用 HTML 的注释语法
四、TS与选项式API
1.为组件的prop标注类型
选项式 API 中对 props 的类型推导需要用
defineComponent()来包装组件。有了它，Vue 才可以通过props以及一些额外的选项，比如required: true和default来推导出 props 的类型：import { defineComponent } from 'vue' export default defineComponent({ // 启用了类型推导 props: { name: String, id: [Number, String], msg: { type: String, required: true }, metadata: null }, mounted() { this.name // 类型：string | undefined this.id // 类型：number | string | undefined this.msg // 类型：string this.metadata // 类型：any } })然而，这种运行时
props选项仅支持使用构造函数来作为一个 prop 的类型——没有办法指定多层级对象或函数签名之类的复杂类型。我们可以使用
PropType这个工具类型来标记更复杂的 props 类型import { defineComponent } from 'vue' import type { PropType } from 'vue' interface Book { title: string author: string year: number } export default defineComponent({ props: { book: { // 提供相对 `Object` 更确定的类型 type: Object as PropType<Book>, required: true }, // 也可以标记函数 callback: Function as PropType<(id: number) => void> }, mounted() { this.book.title // string this.book.year // number // TS Error: argument of type 'string' is not // assignable to parameter of type 'number' this.callback?('123') } })案例如下:
子组件 - {{ user.userName }} - {{ user.age }} - {{ user.sex }}2.为组件的emit 标注类型
我们可以给
emits选项提供一个对象来声明组件所触发的事件，以及这些事件所期望的参数类型。试图触发未声明的事件会抛出一个类型错误：import { defineComponent } from 'vue' export default defineComponent({ emits: { addBook(payload: { bookName: string }) { // 执行运行时校验 return payload.bookName.length > 0 } }, methods: { onSubmit() { this.$emit('addBook', { bookName: 123 // 类型错误 }) this.$emit('non-declared-event') // 类型错误 } } })案例如下：
子组件 - {{ user.userName }} - {{ user.age }} - {{ user.sex }}3.为计算属性标注类型
计算属性会自动根据其返回值来推导其类型：
mport { defineComponent } from 'vue' export default defineComponent({ data() { return { message: 'Hello!' } }, computed: { greeting() { return this.message + '!' } }, mounted() { this.greeting // 类型：string } })在某些场景中，你可能想要显式地标记出计算属性的类型以确保其实现是正确的：
import { defineComponent } from 'vue' export default defineComponent({ data() { return { message: 'Hello!' } }, computed: { // 显式标注返回类型 greeting(): string { return this.message + '!' }, // 标注一个可写的计算属性 greetingUppercased: { get(): string { return this.greeting.toUpperCase() }, set(newValue: string) { this.message = newValue.toUpperCase() } } } })在某些 TypeScript 因循环引用而无法推导类型的情况下，可能必须进行显式的类型标注。
案例如下：
+ = {{ fullName }}4.为事件处理器标注类型
在处理原生 DOM 事件时，应该为我们传递给事件处理函数的参数正确地标注类型。
没有类型标注时，这个
event参数会隐式地标注为any类型。这也会在tsconfig.json中配置了"strict": true或"noImplicitAny": true时抛出一个 TS 错误。因此，建议显式地为事件处理函数的参数标注类型。此外，你可能需要显式地强制转换event上的属性：import { defineComponent } from 'vue' export default defineComponent({ methods: { handleChange(event: Event) { console.log((event.target as HTMLInputElement).value) } } })案例如下：
5.扩充全局property
某些插件会通过
app.config.globalProperties为所有组件都安装全局可用的属性。举例来说，我们可能为了请求数据而安装了this.$http，或者为了国际化而安装了this.$translate。为了使 TypeScript 更好地支持这个行为，Vue 暴露了一个被设计为可以通过 TypeScript 模块扩展来扩展的ComponentCustomProperties接口：import axios from 'axios' declare module 'vue' { interface ComponentCustomProperties { $http: typeof axios $translate: (key: string) => string } }我们可以将这些类型扩展放在一个
.ts文件，或是一个影响整个项目的*.d.ts文件中。无论哪一种，都应确保在tsconfig.json中包括了此文件。对于库或插件作者，这个文件应该在package.json的types属性中被列出。为了利用模块扩展的优势，你需要确保将扩展的模块放在 TypeScript 模块 中。 也就是说，该文件需要包含至少一个顶级的
import或export，即使它只是export {}。如果扩展被放在模块之外，它将覆盖原始类型，而不是扩展!// 正常工作。 export {} declare module 'vue' { interface ComponentCustomProperties { $translate: (key: string) => string } }案例如下：
// src/main.ts import { createApp } from 'vue' // import axios from 'axios' import App from './App.vue' const app = createApp(App) app.config.globalProperties.test = '测试' app.mount('#app')打印 this.test 时遇到 ts 的问题
6.扩充自定义选项
某些插件，比如
vue-router，提供了一些自定义的组件选项，比如beforeRouteEnter：import { defineComponent } from 'vue' export default defineComponent({ beforeRouteEnter(to, from, next) { // ... } })如果没有确切的类型标注，这个钩子函数的参数会隐式地标注为
any类型。我们可以为ComponentCustomOptions接口扩展自定义的选项来支持：import { Route } from 'vue-router' declare module 'vue' { interface ComponentCustomOptions { beforeRouteEnter?(to: Route, from: Route, next: () => void): void } }现在这个
beforeRouteEnter选项会被准确地标注类型。注意这只是一个例子——像vue-router这种类型完备的库应该在它们自己的类型定义中自动执行这些扩展。五、开始项目构建
只保留src文件夹下的 main.ts 以及 App.vue组件，
// src/App.vue <script lang="ts"> </script> <template> <div>App.vue</div> </template> <style> </style>// src/main.ts import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.mount('#app')5.1 准备工作
- 假如项目使用styl / stylus 作为css的预处理器
$ cnpm i stylus -D-
回顾移动端布局
-
弹性盒布局
display: flex; flex-direction: column; justify-content: center; align-items: center; -
rem布局
html { font-size: 100px; } div { /* height: 50px; */ height: 0.5rem; }? rem以及em布局的区别
-
VW/VH布局
html { font-size: 100px; /* 100 / 375 * 100 100 进行375等分，然后乘以好计算的100 */ /* iphone6 750 * 1334 375 * 667*/ /* iphne5 640 * 1136 320 * 568 100/320*100 = 31.25vw*/ /* font-size: 26.666667vw; */ /* iphone6 1rem=100px 其余机型自动适配*/ } body { /* 设计稿中的最小的字体大小 */ font-size: 12px; } div { /* height: 50px; */ height: 0.5rem; } -
媒体查询
@media screen and (max-width: 300px) { body { background-color:lightblue; } } @media only screen and (orientation: landscape) { // 横屏 portrait 竖屏 html { font-size: 100px; } }
-
-
ts基础知识(类型注解、类型断言、！、？、interface、type、声明文件*.d.ts 。。。。。。)
https://www.bilibili.com/video/BV1H44y157gq/?spm_id_from=333.337.search-card.all.click
5.2 构建移动端基本页面结构
5.2.1 基本构建
编写重置样式表如下：
// src/assets/main.styl * { padding: 0; margin: 0;// src/assets/main.styl // stylus语法考验写代码的规范 * padding 0 margin 0 list-style none html height 100% font-size 26.6666667vw body height 100% font-size 14px #app height 100% list-style: none; text-decoration: none; } html, body, #app { height: 100%; }项目入口文件代码如下：
// src/main.ts import { createApp } from 'vue' import App from './App.vue' import './assets/main.styl' const app = createApp(App) app.mount('#app')项目根组件如下：
header content运行项目，发现页面呈现上中下结构，这就是我们的移动端页面的主要布局了。
那么问题来了，假如用户把手机横屏，这个时候如果还是使用vw和rem布局的话就用容易出问题了。（通过点击模拟器旋转屏幕按钮查看）
5.2.2 媒体查询处理横屏
可以设置横屏情况下不采用vw布局或者给用户展示一个提示信息
// src/assets/main.styl // stylus语法考验写代码的规范 * padding 0 margin 0 list-style none html height 100% font-size 26.6666667vw body height 100% font-size 14px #app height 100% @media only screen and (orientation landscape) // 横屏 // 横屏状态下不要使用vw布局 html font-size 100px根组件这样写：
header content请将屏幕竖向浏览现在审查元素 查看css 没有自动补全样式，如何通过配置自动补全css
5.2.4 自动补全css
$ cnpm i postcss postcss-preset-env -D项目根目录下创建
postcss.config.js// postcss.config.js module.exports = { plugins: [ require('postcss-preset-env') ] }给页面的底部添加
user-select: none，重启项目，审查元素看前后的变化// 未配置 postcss 时，渲染为 .container .footer { height: 0.5rem; background-color: #efefef; user-select: none; } // 配置过 postcss 时，渲染为 .container .footer { height: 0.5rem; background-color: #efefef; -webkit-user-select: none; -moz-user-select: none; user-select: none; }5.3 构建项目基本页面
思考每个页面的头部和内容区域是根据用户的选择而一起改变的，那么可以创建以下四个基本页面
5.3.1 构建首页面
home header home content5.3.2 构建分类页面
kind header kind content5.3.3 构建购物车页面
cart header cart content5.3.4 构建个人中心页面
<template> <div class="box"> <header class="header">user headerheader> <div class="content">user contentdiv> div> template> <script lang='ts'> import { defineComponent } from 'vue'; export default defineComponent({}) script> <style lang='stylus'> style>5.4 引入路由
创建项目时，已经选择过使用vue-router，所以不需要安装
如果没有选择，那么使用以下语句安装
$ cnpm i vue-router@4 -S然后再配置
5.4.1 创建路由
一般情况下，会将路由设置到
src/router/index.ts文件中// src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw, Router } from 'vue-router' // 直接引入组件，不管你用不用这个页面，我都引入了 --- 静态导入 import Home from '@/views/home/index.vue' // import Kind from '@/views/kind/index.vue' // import Cart from '@/views/cart/index.vue' // import User from '@/views/user/index.vue' // 使用路由懒加载 - 访问该路由时才加载该组件 --- 动态导入 const Kind = () => import('@/views/kind/index.vue') const Cart = () => import('@/views/cart/index.vue') const User = () => import('@/views/user/index.vue') const routes: RouteRecordRaw[] = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', component: Home }, { path: '/kind', name: 'kind', component: Kind }, { path: '/cart', name: 'cart', component: Cart }, { path: '/user', name: 'user', component: User } ] const router: Router = createRouter({ history: createWebHistory(), routes }) export default router5.4.2 入口文件中使用路由
调用路由以插件的形式
// src/main.ts import { createApp } from 'vue' import App from './App.vue' import router from '@/router' import './assets/main.styl' const app = createApp(App) app.use(router) app.mount('#app')5.4.3 路由出口
vue-router内置了router-view将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局请将屏幕竖向浏览此时地址栏分别输入
http://127.0.0.1:5173/home、http://127.0.0.1:5173/kind、http://127.0.0.1:5173/cart、http://127.0.0.1:5173/user查看项目运行结果，
可以得知已经可以通过路由显示不同的页面
但是用户一般都是通过底部选项卡来切换页面的
5.4.4 构建页面底部组件
在
src文件夹下创建components文件夹，在components文件夹下创建底部组件因为底部选项卡需要字体图标，可以选择 iconfont阿里字体图标库，搜索图标，加入购物车，添加至项目
mobile-vue-app，选择font-class,点击查看在线链接，拷贝css链接项目根目录下
index.html中引入css链接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 Apptitle> <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3665887_h3lsrioddkk.css"> head> <body> <div id="app">div> <script type="module" src="/src/main.ts">script> body> html>底部组件展示如下：
根组件引入底部组件
请将屏幕竖向浏览5.4.5 声明式导航跳转页面
声明式跳转 a href
编程式跳转 window.location.href = ‘’
vue-router中提供了vue3 - vue-router4 移除了 tag 属性
vue-router中router-link组件的custom、v-slot的属性，且需要解构出isActive、href、navigate等属性，具体代码如下参考：https://router.vuejs.org/zh/api/#custom
请将屏幕竖向浏览vue-router 3版本中 只需要通过一个tag属性即可生成目标标签。
5.5 引入UI组件库
使用vue实现移动端项目，最好的组件库是 vant，以前还有一个叫做 mint-ui
官网：https://vant-contrib.gitee.io/vant/#/zh-CN
5.5.1 介绍
轻量、可靠的移动端 Vue 组件库
5.5.2 快速上手
-
安装
$ cnpm i vant -S -
按需引入组件
$ cnpm i unplugin-vue-components -D基于
vite的项目，在vite.config.js文件中配置插件// vite.config.ts import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' import Components from 'unplugin-vue-components/vite'; import { VantResolver } from 'unplugin-vue-components/resolvers'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), vueJsx(), Components({ resolvers: [VantResolver()], }), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } }) -
引入函数组件的样式
Vant 中有个别组件是以函数的形式提供的，包括
Toast，Dialog，Notify和ImagePreview组件。在使用函数组件时，unplugin-vue-components无法自动引入对应的样式，因此需要手动引入样式你可以在项目的入口文件或公共模块中引入以上组件的样式，这样在业务代码中使用组件时，便不再需要重复引入样式了。
// src/main.ts import { createApp } from 'vue' import App from './App.vue' import router from '@/router' import 'vant/es/toast/style' import 'vant/es/dialog/style' import 'vant/es/notify/style' import 'vant/es/image-preview/style' import './assets/main.styl' const app = createApp(App) app.use(router) app.mount('#app')首页组件测试
home header 成功按钮 5.6 封装数据请求
在vue/react项目中建议使用
axios作为数据请求的方案axios官网：http://www.axios-js.com/
5.6.1 介绍
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
5.6.2 安装
$ cnpm i axios -S5.6.3 案例
执行
GET请求// 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 上面的请求也可以这样做 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // axios axios({ url: '/user?ID=12345', method: 'GET', }).then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以这么写 axios({ url: '/user', method: 'GET', data: { ID: '12345' } }).then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });执行post请求
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // axios axios({ url: '/user', method: 'POST', data: { firstName: 'Fred', lastName: 'Flintstone' } }).then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });执行多个并发请求
function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 两个请求现在都执行完成 }));5.6.4 axios项目封装
一般封装时，需要判断用户当前所处的环境：开发环境、测试环境、生产环境
开发环境：http://localhost:5173 开发阶段
生产环境: https://www.baidu.com 项目上线，被人通过 ip或者域名访问项目
process.env.NODE_ENV 判断环境。development production
如果封装过程中 出现
找不到名称“process”。是否需要为节点安装类型定义? 请尝试使用npm i --save-dev @types/node，然后将 “node” 添加到类型字段。$ cnpm i @types/node -D修改
tsconfig.json{ "extends": "@vue/tsconfig/tsconfig.web.json", "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "types": [ // ++++++++ "node" ] }, "references": [ { "path": "./tsconfig.config.json" } ] }完整封装代码如下： http://121.89.205.189:3000/apidoc/
// src/utils/request.ts import axios from 'axios' const isDev = process.env.NODE_ENV === 'development' // 真 - 开发环境，假-生产环境 // http://121.89.205.189:3000/apidoc/ // npm run dev 走？后的 // npm run build 走：后的 const ins = axios.create({ baseURL: isDev ? 'http://121.89.205.189:3000/api' : 'http://121.89.205.189:3000/api' }) // 拦截器 ins.interceptors.request.use((config) => { return config }, (err) => { return Promise.reject(err) }) ins.interceptors.response.use((response) => { return response }, (err) => { return Promise.reject(err) }) export default ins5.7 构建首页
5.7.1 封装首页相关数据请求
接口文档：http://121.89.205.189:3000/apidoc/
需要使用接口
- 查看轮播图：http://121.89.205.189:3000/apidoc/#api-Banner-GetBannerList
- 获取秒杀产品列表数据：http://121.89.205.189:3000/apidoc/#api-Pro-GetProSeckillList
- 获取产品分页列表数据：http://121.89.205.189:3000/apidoc/#api-Pro-GetProList
遵循模块化开发思想，将数据请求方法统一封装
// src/api/home.ts import request from '@/utils/request' interface IPager { count: number limitNum: number } // 轮播图数据 export function getBannerList () { return request.get('/banner/list') } // 秒杀列表数据 export function getSeckilllist (params?: IPager) { return request.get('/pro/seckilllist', { params }) } // 产品列表数据 export function getProList (params?: IPager) { return request.get('/pro/list', { params }) }5.7.2 构建首页轮播图组件以及渲染
-
构建轮播图组件
轮播图 -
首页注册引入组件
home header -
首页请求数据以及传递数据
// src/views/home/home.d.ts export interface IBanner { bannerid: string alt: string link: string flag: boolean img: string }home header -
渲染轮播图组件
5.7.3 构建nav导航组件以及渲染
-
构建nav导航组件
nav -
首页引入以及注册nav导航组件
home header -
首页准备nav导航数据并且传递
// src/views/home/home.d.ts export interface IBanner { bannerid: string alt: string link: string flag: boolean img: string } export interface INav { navid: number title: string imgurl: string }home header -
nav导航组件的渲染
5.7.4 构建秒杀列表组件以及渲染
-
构建秒杀列表组件
秒杀 -
首页组件引入以及注册秒杀列表组件
home header -
首页请求秒杀数据以及传递
// src/views/home/home.d.ts export interface IBanner { bannerid: string alt: string link: string flag: boolean img: string } export interface INav { navid: number title: string imgurl: string } export interface IPro { banners: string[] brand: string category: string desc: string discount: number img1: string img2: string img3: string img4: string isrecommend: number issale: number isseckill: number originprice: number proid: string proname: string sales: number stock: number }home header -
秒杀列表组件渲染
嗨购秒杀
-
¥{{ item.originprice }}
作业：实现倒计时
-
5.7.5 构建产品列表组件以及渲染
-
构建产品列表组件
产品列表 -
注册组件以及使用产品列表组件
home header -
请求列表组件的数据以及传递
home header -
渲染列表组件
-
{{ item.proname }}¥{{ item.originprice }}
{{ item.category }}
因为列表的数据展示 内容超过了容器的高度，此时将 App.vue 中的box 以及 content中设置 overflow:auto
-
5.7.6 实现上拉加载功能
List 组件通过
loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。隐藏条件 ，每页页码
home header 5.7.7 实现下拉刷新功能
下拉刷新时会触发
refresh事件，在事件的回调函数中可以进行同步或异步操作，操作完成后将v-model设置为false，表示加载完成。home header 5.7.8 实现返回顶部功能
分析清除到底是哪一个容器产生了滚动条
分析得知 content 容器产生了滚动条，可以给它绑定一个 scroll 事件用于判断 回到顶部按钮显示还是不显示
通过 content 的dom的scrollTop 属性可以设置滚动条距离
当使用vantui组件库4版本时使用如下代码
home header 如果使用4版本以前，参考如下代码
home header 5.7.9 自定义头部
-
自定义头部组件
header -
注册及使用组件
-
完善头部组件
- 太原
-
| 游戏主机 - 登录
5.7.10 优化代码
// src/views/home/components/index.ts // import Banner from './Banner.vue' // import Nav from './Nav.vue' // import Seckill from './Seckill.vue' // import Pro from './Pro.vue' // import Header from './Header.vue' // export { // Banner, // Nav, // Seckill, // Pro, // Header // } export { default as Banner } from './Banner.vue' export { default as Nav } from './Nav.vue' export { default as Seckill } from './Seckill.vue' export { default as Pro } from './Pro.vue' export { default as Header } from './Header.vue'5.8 实现详情
5.8.1 构建详情页面以及详情路由
/detail/1 ======> /detail/:proid =====> this.$route.params.proid ====> params
/detail?proid=1 ======> /detail =====> this.$route.query.proid ====> query
vue中推荐大家使用 params 形式
-
构建详情页面组件
detail header detail content -
添加详情路由
// src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw, Router } from 'vue-router' // 直接引入组件，不管你用不用这个页面，我都引入了 --- 静态导入 import Home from '@/views/home/index.vue' // import Kind from '@/views/kind/index.vue' // import Cart from '@/views/cart/index.vue' // import User from '@/views/user/index.vue' // 使用路由懒加载 - 访问该路由时才加载该组件 --- 动态导入 const Kind = () => import('@/views/kind/index.vue') const Cart = () => import('@/views/cart/index.vue') const User = () => import('@/views/user/index.vue') const Detail = () => import('@/views/detail/index.vue') const routes: RouteRecordRaw[] = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', component: Home }, { path: '/kind', name: 'kind', component: Kind }, { path: '/cart', name: 'cart', component: Cart }, { path: '/user', name: 'user', component: User }, { path: '/detail/:proid', name: 'detail', component: Detail } ] const router: Router = createRouter({ history: createWebHistory(), routes }) export default router地址栏输入 http://localhost:5173/detail/100
但是此时发现，详情页面底部应该隐藏原来的底部的选项卡
5.8.2 改造路由实现页面底部自由
以上案例中 一个路由控制了一个区域的组件，那么可以一个路由控制多个区域的变化吗？
命名视图:https://router.vuejs.org/zh/guide/essentials/named-views.html
{ path: '', name: '', components: { default: '', footer: '' } }// src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw, Router } from 'vue-router' // 直接引入组件，不管你用不用这个页面，我都引入了 --- 静态导入 import Home from '@/views/home/index.vue' import Footer from '@/components/Footer.vue' // import Kind from '@/views/kind/index.vue' // import Cart from '@/views/cart/index.vue' // import User from '@/views/user/index.vue' // 使用路由懒加载 - 访问该路由时才加载该组件 --- 动态导入 const Kind = () => import('@/views/kind/index.vue') const Cart = () => import('@/views/cart/index.vue') const User = () => import('@/views/user/index.vue') const Detail = () => import('@/views/detail/index.vue') const routes: RouteRecordRaw[] = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', // component: Home components: { default: Home, footer: Footer } }, { path: '/kind', name: 'kind', // component: Kind components: { default: Kind, footer: Footer } }, { path: '/cart', name: 'cart', // component: Cart components: { default: Cart, footer: Footer } }, { path: '/user', name: 'user', // component: User components: { default: User, footer: Footer } }, { path: '/detail/:proid', name: 'detail', component: Detail } ] const router: Router = createRouter({ history: createWebHistory(), routes }) export default router请将屏幕竖向浏览5.8.3 点击列表进入产品详情
-
点击秒杀列表声明式跳转至详情
/detail/${1} >嗨购秒杀
-
¥{{ item.originprice }}
-
-
点击产品列表编程式跳转至详情
window.location.href=""this.$router.push('/detail/1')this.$router.push({ name: 'detail', params: { proid: 1}})this.$router.push({ path: '/detail/1'})-
{{ item.proname }}¥{{ item.originprice }}
{{ item.category }}
-
5.8.4 详情页获取路由参数
detail header detail content5.8.5 封装详情页数据请求
// src/api/detail.ts import request from '@/utils/request' interface IPager { count: number limitNum?: number } export function getProDetail (proid: string) { return request.get('/pro/detail/' + proid) } // 详情 猜你喜欢 - 推荐 export function getRecommendList (params?: IPager) { return request.get('/pro/recommendlist', { params }) }5.8.6 渲染详情页面
- 请求数据
detail header detail content5.8.7 渲染轮播图数据
-
轮播图组件
{{ current + 1 }} / {{ total }} -
详情页导入轮播图
detail header
5.8.8 点击播放视频
获取视频时长： dom.duration
获取当前视频播放进度： dom.currentTime
修改当前视频播放进度： dom.currentTime = num
播放视频： dom.play()
暂停视频： dom.pause()
调整音量：dom.volume = 0-1
全屏： dom.requestFullScreen() ---- 需要设置video的宽和高也为全屏
静音： dom.muted = true
5.8.9 构建产品的详细信息
产品信息// src/views/detail/components/index.ts export { default as Banner } from './Banner.vue' export { default as ProInfo } from './ProInfo.vue'detail header ￥{{ originprice }} 销量：{{ sales }}{{ brand }} {{ category }} {{ proname }}
{{ desc }}
5.8.11 猜你喜欢
拷贝了首页的产品列表组件，同时要保证点击推荐列表修改详情页的数据（通过子组件给父组件传值）
-
{{ item.proname }}¥{{ item.originprice }}
{{ item.category }}
// src/views/detail/components/index.ts export { default as Banner } from './Banner.vue' export { default as ProInfo } from './ProInfo.vue' export { default as Pro } from './Pro.vue'detail header 猜你喜欢
直接在父组件监听路由的变化实现
detail header 猜你喜欢
一旦轮播图滑动，切换商品后 轮播图组件的属性 current 没有重置
{{ current + 1 }} / {{ total }}5.8.12 详情页面底部
detail header 猜你喜欢
5.8.13 详情页面头部
- 商品
- 推荐
猜你喜欢
5.8.14 收藏功能 - 作业
本操作属于纯前端操作
1.进入详情页，需要先判断该商品是否被收藏过，如果收藏过，显示已收藏，如果未被收藏过，显示收藏
2.如果当前商品是收藏的，点击要取消收藏
3.如果当前商品是未收藏的，点击收藏
4.数据可以存到本地，localStorage 只能保存 字符串
5.收藏夹内只保存 产品id，以数组的形式存在
6.检测到路由变化 ，执行判断是否收藏
-
- 详情 推荐
-
5.8.15 分析接下来操作
加入购物车（是谁，加了几件，加了哪个商品进入购物车）
是谁
登录
注册
5.9 注册功能
5.9.1 注册思路
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vRZak2KJ-1673602369091)(assets/image-20220923073954061.png)]
5.9.2 嵌套路由
一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：
/user/johnny/profile /user/johnny/posts +------------------+ +-----------------+ | User | | User | | +--------------+ | | +-------------+ | | | Profile | | +------------> | | Posts | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+通过 Vue Router，你可以使用嵌套路由配置来表达这种关系。
/register 注册路由
/register/index 注册第一步
/register/sms 注册第二步
/register/pwd 注册第三步
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UWfKNJk3-1673602369092)(assets/image-20220927101429498.png)]
校验手机号发送短信验证码设置密码// src/views/register/components/index.ts export { default as CheckTel } from './CheckTel.vue' export { default as SendTelCode } from './SendTelCode.vue' export { default as SetPassword } from './SetPassword.vue'// src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw, Router } from 'vue-router' // 直接引入组件，不管你用不用这个页面，我都引入了 --- 静态导入 import Home from '@/views/home/index.vue' import Footer from '@/components/Footer.vue' import { CheckTel, SendTelCode, SetPassword } from '@/views/register/components' // import Kind from '@/views/kind/index.vue' // import Cart from '@/views/cart/index.vue' // import User from '@/views/user/index.vue' // 使用路由懒加载 - 访问该路由时才加载该组件 --- 动态导入 const Kind = () => import('@/views/kind/index.vue') const Cart = () => import('@/views/cart/index.vue') const User = () => import('@/views/user/index.vue') const Detail = () => import('@/views/detail/index.vue') const Vdo = () => import('@/views/video/index.vue') const Register = () => import('@/views/register/index.vue') const routes: RouteRecordRaw[] = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', // component: Home components: { default: Home, footer: Footer } }, { path: '/kind', name: 'kind', // component: Kind components: { default: Kind, footer: Footer } }, { path: '/cart', name: 'cart', // component: Cart components: { default: Cart, footer: Footer } }, { path: '/user', name: 'user', // component: User components: { default: User, footer: Footer } }, { path: '/detail/:proid', name: 'detail', // component: Detail components: { // 与 component: Detail 等价 default: Detail } }, { path: '/vdo', name: 'vdo', components: { default: Vdo } }, { path: '/register', name: 'register', redirect: '/register/index', component: Register, children: [ { path: 'index', // /register/index component: CheckTel }, { path: 'sms', // /register/sms component: SendTelCode }, { path: 'pwd', // /register/pwd component: SetPassword } ] } ] const router: Router = createRouter({ history: createWebHistory(), routes }) export default router5.9.3 注册第一步页面
下一步 5.9.4注册第二步页面
获取验证码 下一步 5.9.5注册第三步页面
密码由6-20位大小写字母数字等组成完成 5.9.6 封装注册登录接口
// src/api/user.ts import request from '@/utils/request' // 检测手机号是否被注册过 export function doCheckPhone (params: { tel: string }) { return request.post('/user/docheckphone', params) } // 发送短信验证码 export function doSendMsgCode (params: { tel: string }) { return request.post('/user/dosendmsgcode', params) } // 验证验证码 export function doCheckCode (params: { tel: string, telcode: string }) { return request.post('/user/docheckcode', params) } // 设置密码完成注册 export function doFinishRegister (params: { tel: string, password: string }) { return request.post('/user/dofinishregister', params) } // 登录 export function doLogin (params: { loginname: string, password: string }) { return request.post('/user/login', params) }5.9.7 实现注册第一步功能
下一步 5.9.8 实现注册第二步功能
发送短信验证码实际上没有发送至手机，请至控制台查看验证码
{{ text }} 下一步 5.9.9 实现注册第三步功能
密码由6-20位大小写字母数字等组成完成 5.10 登录实现
5.10.1 登录思路
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qWhS9FoA-1673602369093)(assets/image-20220923074218453.png)]
5.10.2 构建登录页面
登录 5.10.3 注册登录路由
// src/router/index.ts import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw, Router } from 'vue-router' // 直接引入组件，不管你用不用这个页面，我都引入了 --- 静态导入 import Home from '@/views/home/index.vue' import Footer from '@/components/Footer.vue' import { CheckTel, SendTelCode, SetPassword } from '@/views/register/components' // import Kind from '@/views/kind/index.vue' // import Cart from '@/views/cart/index.vue' // import User from '@/views/user/index.vue' // 使用路由懒加载 - 访问该路由时才加载该组件 --- 动态导入 const Kind = () => import('@/views/kind/index.vue') const Cart = () => import('@/views/cart/index.vue') const User = () => import('@/views/user/index.vue') const Detail = () => import('@/views/detail/index.vue') const Vdo = () => import('@/views/video/index.vue') const Register = () => import('@/views/register/index.vue') const Login = () => import('@/views/login/index.vue') const routes: RouteRecordRaw[] = [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', // component: Home components: { default: Home, footer: Footer } }, { path: '/kind', name: 'kind', // component: Kind components: { default: Kind, footer: Footer } }, { path: '/cart', name: 'cart', // component: Cart components: { default: Cart, footer: Footer } }, { path: '/user', name: 'user', // component: User components: { default: User, footer: Footer } }, { path: '/detail/:proid', name: 'detail', // component: Detail components: { // 与 component: Detail 等价 default: Detail } }, { path: '/vdo', name: 'vdo', components: { default: Vdo } }, { path: '/register', name: 'register', redirect: '/register/index', component: Register, children: [ { path: 'index', // /register/index component: CheckTel }, { path: 'sms', // /register/sms component: SendTelCode }, { path: 'pwd', // /register/pwd component: SetPassword } ] }, { path: '/login', name: 'login', component: Login }, ] const router: Router = createRouter({ history: createWebHistory(), routes }) export default router5.10.4 实现登录功能
登录 手机号立即注册 5.11 加入购物车
前端校验用户登录状态，如果登录，调用后端接口加入购物车，如果前端校验未登录，需要跳转到登录页面
后端校验未登录也需要跳转到登录页面
5.11.1 重新封装 数据请求
// src/utils/request.ts import axios from 'axios' import router from '@/router' const isDev = process.env.NODE_ENV === 'development' // 真 - 开发环境，假-生产环境 // http://121.89.205.189:3000/apidoc/ // npm run dev 走？后的 // npm run build 走：后的 const ins = axios.create({ baseURL: isDev ? 'http://121.89.205.189:3000/api' : 'http://121.89.205.189:3000/api' }) // 拦截器 ins.interceptors.request.use((config: any) => { (config.headers!.token as string) = localStorage.getItem('token')! // +++++ return config }, (err) => { return Promise.reject(err) }) ins.interceptors.response.use((response: any) => { // 判断登录标识 是否有效，如果无效跳转至登录页面，如果有效，不做操作 if (response.data.code === '10119') { // 没有传递token 或者 token过期 // 跳转到登录页面 重新登录 router.push('/login') return null } else { return response } }, (err) => { return Promise.reject(err) }) export default ins5.11.2 封装购物车相关数据请求
// src/api/cart.ts import request from '@/utils/request' // 加入购物车 export function addCart (params: { userid: string, proid: string, num: number }) { return request.post('/cart/add', params) } // 获取购物车列表数据 export function getCartListData (params: { userid: string }) { return request.post('/cart/list', params) } // 删除某个用户的购物车的所有数据 export function removeAllData (params: { userid: string }) { return request.post('/cart/removeall', params) } // 删除某个用户的一条购物车的数据 export function removeOneData (params: { cartid: string }) { return request.post('/cart/remove', params) } // 更新某个用户的一条购物车的数据的选中状态 export function selectOneData (params: { cartid: string, flag: boolean }) { return request.post('/cart/selectone', params) } // 更新某个用户的购物车的所有数据的选中状态 export function selectAllData (params: { userid: string, type: boolean }) { return request.post('/cart/selectall', params) } // 更新某个用户的购物车的某个产品的数量 export function updateOneDataNum (params: { cartid: string, num: number }) { return request.post('/cart/updatenum', params) } // 推荐商品接口 export function getCartRecommendData () { return request.get('/pro/recommendlist') }5.11.3 加入购物车
- 商品
- 推荐
猜你喜欢
5.12 购物车功能实现
5.12.1 基本购物车结构
立即购物 全选 5.12.2 请求购物车的数据并且渲染
// src/views/cart/cart.d.ts export interface ICartItem { cartid: string discount: number flag: boolean img1: string num: number originprice: number proid: string proname: string userid: string }立即购物 全选 5.12.3 删除数据
异步删除 - 全局变量传值
立即购物 全选 5.12.4 修改购物车数量
使用插槽自定义数量位置，使用步进器组件完成数量更改，传参传对象
立即购物 全选 5.12.5 计算总价和总数量
总数位0 按钮不可点
立即购物 全选 实际上总价以及总数需要选中才计算
5.12.6 全选以及单选
以 layout组件 以及checkbox 组件完成 基本布局
立即购物 全选 默认全选不选中，通过列表的数据控制全选的效果
立即购物 全选 点击全选控制列表选中状态
立即购物 全选 单个列表选中
立即购物 全选 5.12.7 推荐列表实现
-
{{ item.proname }}¥{{ item.originprice }}
{{ item.category }}
// src/views/cart/cart.d.ts export interface ICart { cartid: string discount: number flag: boolean img1: string num: number originprice: number proid: string proname: string userid: string } export interface IPro { banners: string[] brand: string category: string desc: string discount: number img1: string img2: string img3: string img4: string isrecommend: number issale: number isseckill: number originprice: number proid: string proname: string sales: number stock: number }立即购物 可能你喜欢 猜你还想要 全选 5.12.8 分析接下来思路
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3GGGsXA4-1673602369095)(assets/未命名文件.png)]
5.13 提交订单
5.13.1 封装订单相关接口
// src/api/order.ts import request from '../service/request' // 添加订单 export function addOrderData (params: { userid: string }) { return request.post('/order/addOrder', params) } // 获取订单信息 export function getOrderListData (params: { userid: string, time: string }) { return request.get('/order/confirmOrder', {params}) } export interface IOrderAddress { userid: string time: string name: string tel: string province: string city: string county: string addressDetail: string } // 获取订单信息 export function updateOrderAddressData (params: IOrderAddress) { return request.post('/order/updateOrderAddress', params) }立即购物 快点来看看 可能你想要 全选 5.14 确定订单实现
5.14.1 创建页面以及更新路由
order content// src/router/index.ts // 1.引入 创建路由的模块 以及 路由历史记录模式的模块 // 路由的历史模式： // createWebHistory HTML5模式 /home /kind /cart /user 需要后端配合 // createWebHashHistory Hash 模式 /#/home /#/kind /#/cart /#/user import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw, Router } from 'vue-router' // 路由规则的类型 ---- 路由规则的类型注解 // 2.引入页面组件 import Footer from '../components/FooterComponent.vue' import HomeView from './../views/home/IndexView.vue' import KindView from './../views/kind/IndexView.vue' import CartView from './../views/cart/IndexView.vue' import UserView from './../views/user/IndexView.vue' import DetailView from '../views/detail/IndexView.vue' import RegisterView from '../views/register/IndexView.vue' import CheckTelComponent from '../views/register/components/CheckTelComponent.vue' import SendTelCodeComponent from '../views/register/components/SendTelCodeComponent.vue' import SetPasswordComponent from '../views/register/components/SetPasswordComponent.vue' import LoginView from '../views/login/IndexView.vue' import OrderView from '../views/order/IndexView.vue' // ++++++++++ // 3.构建路由的规则 const routes: RouteRecordRaw[] = [ { // 路由的重定向 path: '/', redirect: '/home' }, { path: '/home', // 地址栏地址 - 路由 name: 'home', // 命名路由 --- 唯一性 // component: HomeView // 路由映射的页面组件 components: { default: HomeView, footer: Footer } }, { path: '/kind', name: 'kind', // component: KindView components: { default: KindView, footer: Footer } }, { path: '/cart', name: 'cart', // component: CartView components: { default: CartView, footer: Footer } }, { path: '/user', name: 'user', // component: UserView components: { default: UserView, footer: Footer } }, { path: '/detail/:proid', name: 'detail', // component: DetailView components: { default: DetailView } }, { path: '/register', name: 'register', redirect: '/register/index', component: RegisterView, children: [ { path: 'index', component: CheckTelComponent }, { path: 'sms', component: SendTelCodeComponent }, { path: 'pwd', component: SetPasswordComponent } ] }, { path: '/login', name: 'login', component: LoginView }, { // ++++++++++ path: '/order', name: 'order', component: OrderView } ] // 4.生成路由 const router: Router = createRouter({ // vue2 vue-router3 history: 'history' | 'hash' history: createWebHistory(), routes // routes: routes 简写形式 }) // 5.暴露路由 export default router5.14.2 布局
原价：{{ totalPrice }}
快递费：{{ express }}
5.14.3 点击选择地址
点击进入地址选择页面
// src/router/index.ts // 1.引入 创建路由的模块 以及 路由历史记录模式的模块 // 路由的历史模式： // createWebHistory HTML5模式 /home /kind /cart /user 需要后端配合 // createWebHashHistory Hash 模式 /#/home /#/kind /#/cart /#/user import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw, Router } from 'vue-router' // 路由规则的类型 ---- 路由规则的类型注解 // 2.引入页面组件 import Footer from '../components/FooterComponent.vue' import HomeView from './../views/home/IndexView.vue' import KindView from './../views/kind/IndexView.vue' import CartView from './../views/cart/IndexView.vue' import UserView from './../views/user/IndexView.vue' import DetailView from '../views/detail/IndexView.vue' import RegisterView from '../views/register/IndexView.vue' import CheckTelComponent from '../views/register/components/CheckTelComponent.vue' import SendTelCodeComponent from '../views/register/components/SendTelCodeComponent.vue' import SetPasswordComponent from '../views/register/components/SetPasswordComponent.vue' import LoginView from '../views/login/IndexView.vue' import OrderView from '../views/order/IndexView.vue' import OrderAddressListView from '../views/order/AddressListView.vue' // 3.构建路由的规则 const routes: RouteRecordRaw[] = [ { // 路由的重定向 path: '/', redirect: '/home' }, { path: '/home', // 地址栏地址 - 路由 name: 'home', // 命名路由 --- 唯一性 // component: HomeView // 路由映射的页面组件 components: { default: HomeView, footer: Footer } }, { path: '/kind', name: 'kind', // component: KindView components: { default: KindView, footer: Footer } }, { path: '/cart', name: 'cart', // component: CartView components: { default: CartView, footer: Footer } }, { path: '/user', name: 'user', // component: UserView components: { default: UserView, footer: Footer } }, { path: '/detail/:proid', name: 'detail', // component: DetailView components: { default: DetailView } }, { path: '/register', name: 'register', redirect: '/register/index', component: RegisterView, children: [ { path: 'index', component: CheckTelComponent }, { path: 'sms', component: SendTelCodeComponent }, { path: 'pwd', component: SetPasswordComponent } ] }, { path: '/login', name: 'login', component: LoginView }, { path: '/order', name: 'order', component: OrderView }, { // ++++++++ path: '/orderAddress', name: 'orderAddress', component: OrderAddressListView } ] // 4.生成路由 const router: Router = createRouter({ // vue2 vue-router3 history: 'history' | 'hash' history: createWebHistory(), routes // routes: routes 简写形式 }) // 5.暴露路由 export default router点击进入地址列表页面
原价：{{ totalPrice }}
快递费：{{ express }}
5.14.4 添加地址页面
cnpm i -S @vant/area-data
// src/router/index.ts // 1.引入 创建路由的模块 以及 路由历史记录模式的模块 // 路由的历史模式： // createWebHistory HTML5模式 /home /kind /cart /user 需要后端配合 // createWebHashHistory Hash 模式 /#/home /#/kind /#/cart /#/user import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw, Router } from 'vue-router' // 路由规则的类型 ---- 路由规则的类型注解 // 2.引入页面组件 import Footer from '../components/FooterComponent.vue' import HomeView from './../views/home/IndexView.vue' import KindView from './../views/kind/IndexView.vue' import CartView from './../views/cart/IndexView.vue' import UserView from './../views/user/IndexView.vue' import DetailView from '../views/detail/IndexView.vue' import RegisterView from '../views/register/IndexView.vue' import CheckTelComponent from '../views/register/components/CheckTelComponent.vue' import SendTelCodeComponent from '../views/register/components/SendTelCodeComponent.vue' import SetPasswordComponent from '../views/register/components/SetPasswordComponent.vue' import LoginView from '../views/login/IndexView.vue' import OrderView from '../views/order/IndexView.vue' import OrderAddressListView from '../views/order/AddressListView.vue' import OrderAddAddressView from '../views/order/AddAddressView.vue' // 3.构建路由的规则 const routes: RouteRecordRaw[] = [ { // 路由的重定向 path: '/', redirect: '/home' }, { path: '/home', // 地址栏地址 - 路由 name: 'home', // 命名路由 --- 唯一性 // component: HomeView // 路由映射的页面组件 components: { default: HomeView, footer: Footer } }, { path: '/kind', name: 'kind', // component: KindView components: { default: KindView, footer: Footer } }, { path: '/cart', name: 'cart', // component: CartView components: { default: CartView, footer: Footer } }, { path: '/user', name: 'user', // component: UserView components: { default: UserView, footer: Footer } }, { path: '/detail/:proid', name: 'detail', // component: DetailView components: { default: DetailView } }, { path: '/register', name: 'register', redirect: '/register/index', component: RegisterView, children: [ { path: 'index', component: CheckTelComponent }, { path: 'sms', component: SendTelCodeComponent }, { path: 'pwd', component: SetPasswordComponent } ] }, { path: '/login', name: 'login', component: LoginView }, { path: '/order', name: 'order', component: OrderView }, { path: '/orderAddress', name: 'orderAddress', component: OrderAddressListView }, { // +++++++++ path: '/orderAddAddress', name: 'orderAddAddress', component: OrderAddAddressView } ] // 4.生成路由 const router: Router = createRouter({ // vue2 vue-router3 history: 'history' | 'hash' history: createWebHistory(), routes // routes: routes 简写形式 }) // 5.暴露路由 export default router添加并使用该地址（添加i地址进入地址列表页面，修改订单的地址）
5.14.5 封装地址相关接口
// src/api/address.ts import request from '../service/request' export interface IAddress { userid: string name: string tel: string province: string city: string county: string addressDetail: string isDefault: boolean } export function addAddRessData (params: IAddress ) { return request.post('/address/add', params) } export function getAddressList (params: {userid: string} ) { return request.get('/address/add', {params}) }5.14.6 添加地址实现
5.14.7 确认订单页面处理地址
计算属性即可完成
原价：{{ totalPrice }}
快递费：{{ express }}
5.14.4 添加地址页面
cnpm i -S @vant/area-data
// src/router/index.ts // 1.引入 创建路由的模块 以及 路由历史记录模式的模块 // 路由的历史模式： // createWebHistory HTML5模式 /home /kind /cart /user 需要后端配合 // createWebHashHistory Hash 模式 /#/home /#/kind /#/cart /#/user import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw, Router } from 'vue-router' // 路由规则的类型 ---- 路由规则的类型注解 // 2.引入页面组件 import Footer from '../components/FooterComponent.vue' import HomeView from './../views/home/IndexView.vue' import KindView from './../views/kind/IndexView.vue' import CartView from './../views/cart/IndexView.vue' import UserView from './../views/user/IndexView.vue' import DetailView from '../views/detail/IndexView.vue' import RegisterView from '../views/register/IndexView.vue' import CheckTelComponent from '../views/register/components/CheckTelComponent.vue' import SendTelCodeComponent from '../views/register/components/SendTelCodeComponent.vue' import SetPasswordComponent from '../views/register/components/SetPasswordComponent.vue' import LoginView from '../views/login/IndexView.vue' import OrderView from '../views/order/IndexView.vue' import OrderAddressListView from '../views/order/AddressListView.vue' import OrderAddAddressView from '../views/order/AddAddressView.vue' // 3.构建路由的规则 const routes: RouteRecordRaw[] = [ { // 路由的重定向 path: '/', redirect: '/home' }, { path: '/home', // 地址栏地址 - 路由 name: 'home', // 命名路由 --- 唯一性 // component: HomeView // 路由映射的页面组件 components: { default: HomeView, footer: Footer } }, { path: '/kind', name: 'kind', // component: KindView components: { default: KindView, footer: Footer } }, { path: '/cart', name: 'cart', // component: CartView components: { default: CartView, footer: Footer } }, { path: '/user', name: 'user', // component: UserView components: { default: UserView, footer: Footer } }, { path: '/detail/:proid', name: 'detail', // component: DetailView components: { default: DetailView } }, { path: '/register', name: 'register', redirect: '/register/index', component: RegisterView, children: [ { path: 'index', component: CheckTelComponent }, { path: 'sms', component: SendTelCodeComponent }, { path: 'pwd', component: SetPasswordComponent } ] }, { path: '/login', name: 'login', component: LoginView }, { path: '/order', name: 'order', component: OrderView }, { path: '/orderAddress', name: 'orderAddress', component: OrderAddressListView }, { // +++++++++ path: '/orderAddAddress', name: 'orderAddAddress', component: OrderAddAddressView } ] // 4.生成路由 const router: Router = createRouter({ // vue2 vue-router3 history: 'history' | 'hash' history: createWebHistory(), routes // routes: routes 简写形式 }) // 5.暴露路由 export default router添加并使用该地址（添加i地址进入地址列表页面，修改订单的地址）
5.14.5 封装地址相关接口
// src/api/address.ts import request from '../service/request' export interface IAddress { userid: string name: string tel: string province: string city: string county: string addressDetail: string isDefault: boolean } export function addAddRessData (params: IAddress ) { return request.post('/address/add', params) } export function getAddressList (params: {userid: string} ) { return request.get('/address/add', {params}) }5.14.6 添加地址实现
5.14.7 确认订单页面处理地址
计算属性即可完成
原价：{{ totalPrice }}
快递费：{{ express }}
- 相对路径需要以