前端项目
文章平均质量分 84
清梦压星河_Ciao
这个作者很懒,什么都没留下…
展开
-
01.vue3大事件——项目初始化、技术介绍
一些优势:比同类工具快 2倍 左右(比yarn更快)、节省磁盘空间… https://www.pnpm.cn/选择需要的依赖:router、pinia、ESLint、prettier。原创 2023-11-27 10:10:21 · 199 阅读 · 0 评论 -
09. 智慧商城——订单结算、订单管理
01. 订单结算台所谓的 “立即结算”,本质就是跳转到订单结算台,并且跳转的同时,需要携带上对应的订单参数。而具体需要哪些参数,就需要基于 【订单结算台】 的需求来定。(1) 静态布局准备静态页面<template> <div class="pay"> <van-nav-bar fixed title="订单结算台" left-arrow @click-left="$router.go(-1)" /> <!-- 地址相关 -->原创 2023-11-27 09:37:37 · 148 阅读 · 0 评论 -
10.智慧商城——个人中心、项目打包
01. 个人中心 - 基本渲染1 封装获取个人信息 - API接口import request from '@/utils/request'// 获取个人信息export const getUserInfoDetail = () => { return request.get('/user/info')}2 调用接口,获取数据进行渲染<template> <div class="user"> <div class="head-page"原创 2023-11-20 09:46:23 · 79 阅读 · 0 评论 -
08.智慧商城——购物车布局、全选反选、功能实现
01. 购物车 - 静态布局基本结构<template> <div class="cart"> <van-nav-bar title="购物车" fixed /> <!-- 购物车开头 --> <div class="cart-title"> <span class="all">共<i>4</i>件商品</span> <span cl原创 2023-11-20 09:18:22 · 212 阅读 · 0 评论 -
07.智慧商城——商品详情页、加入购物车、拦截器封装token
01. 商品详情 - 静态布局静态结构 和 样式<template> <div class="prodetail"> <van-nav-bar fixed title="商品详情页" left-arrow @click-left="$router.go(-1)" /> <van-swipe :autoplay="3000" @change="onChange"> <van-swipe-item v-for="(im原创 2023-11-17 15:01:20 · 284 阅读 · 1 评论 -
使用vuex完成小黑记事本案例
【代码】使用vuex完成小黑记事本案例。原创 2023-11-17 10:51:26 · 272 阅读 · 0 评论 -
06.智慧商城——历史搜索记录、搜索页面实现
01. 搜索 - 静态布局准备静态结构和代码<template> <div class="search"> <van-nav-bar title="商品搜索" left-arrow @click-left="$router.go(-1)" /> <van-search show-action placeholder="请输入搜索关键词" clearable> <template #action>原创 2023-11-16 14:40:50 · 214 阅读 · 0 评论 -
05.智慧商城——路由前置守卫、首页动态渲染
说明:智慧商城项目,大部分页面,游客都可以直接访问, 如遇到需要登录才能进行的操作,提示并跳转到登录。但是:对于支付页,订单页等,必须是登录的用户才能访问的,游客不能进入该页面,需要做拦截处理。2.只有全局前置守卫放行,才会真正解析渲染组件,才能看到页面内容。1.所有的路由一旦被匹配到,都会先经过全局前置守卫。// 主题 padding。// 导航条样式定制。// 搜索框样式定制。原创 2023-11-16 10:34:23 · 105 阅读 · 0 评论 -
04.智慧商城——短信验证码倒计时、登录请求、响应拦截器统一处理、请求loading效果
数据流转站”,可以在里面统一处理错误,只要不是 200 默认给提示,抛出错误。响应拦截器是咱们拿到数据的。提供登录 Api 函数。原创 2023-11-16 10:00:50 · 146 阅读 · 0 评论 -
03.智慧商城——封装请求模块、登录静态页面、图形验证码
接口文档:https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080。基地址:http://cba.itlike.com/public/index.php?演示地址:http://cba.itlike.com/public/mweb/#/利用 axios.create 创建一个自定义的 axios 来使用。一般项目开发中, 都会对 axios 进行基本的。, 单独封装到一个模块中, 便于使用。原创 2023-11-16 09:34:59 · 188 阅读 · 0 评论 -
03.智慧商城——路由配置
配置路由出口, 配置 tabbar。配置一级路由,新建对应的页面文件。原创 2023-11-16 09:22:34 · 69 阅读 · 0 评论 -
02.智慧商城——vant组件库使用和vw适配
官方说明:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage。1.全部导入会引起项目打包后的体积变大,进而影响用户访问网站的性能。vant-ui提供了很多的组件,全部导入,会导致项目打包变得很大。组件库:第三方封装好了很多很多的组件,整合到一起就是一个组件库。比如日历组件、键盘组件、打分组件、下拉筛选组件等。2.按需导入只会导入你使用的组件,进而节约了资源。viewportWidth:设计稿的视口宽度。main.js中进行导入。原创 2023-11-16 09:14:15 · 164 阅读 · 0 评论 -
01.智慧商城——项目介绍与初始化
接口文档:https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080演示地址:http://cba.itlike.com/public/mweb/#/原创 2023-11-16 09:05:26 · 226 阅读 · 0 评论