移动端智慧商城项目（vue2）之组件库vant/移动端vw适配/request封装/storage封装/api请求封装/请求响应拦截器/嵌套路由配置/路由导航守卫/路由跳转传参vuex分模块管理数据

已于 2024-07-16 17:55:12 修改
阅读量1k 收藏 22
点赞数 25
CC 4.0 BY-SA版权
分类专栏： vue2和vue3学习 文章标签： javascript vue.js 开发语言 前端
于 2024-05-14 19:55:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_66318904/article/details/138214388

智慧商城

接口文档：https://apifox.com/apidoc/shared-12ab6b18-adc2-444c-ad11-0e60f5693f66/doc-2221080

演示地址：http://cba.itlike.com/public/mweb/#/

01. 项目功能演示

1.明确功能模块

目标：查看项目效果，明确功能模块 → 完整的电商购物流程

在这里插入图片描述

2.项目收获

在这里插入图片描述

02. 项目创建目录初始化

vue-cli 建项目

在这里插入图片描述

1.安装脚手架 (已安装)

npm i @vue/cli -g
了解本专栏 订阅专栏 解锁全文 超级会员免费看
移动端项目（vue2+vant组件库）
qq_45585640的博客
06-23 8041
在命令行中输入以下命令创建 Vue 项目： 这里建议两个都选上，更严谨。 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。 安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如
【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践
xxxzzzqqq_的博客
03-15 3038
预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
VUWE——又一个移动端Vue2组件库
weixin_33872566的博客
12-27 257
VUWE 在线预览 介绍 VUWE是一款基于微信WeUI所开发的，专用于Vue2的组件库。 它与WeUI完全解耦。用户通过自定义WeUI的样式文件，可以方便地对VUWE实现定制化。 中文文档 使用 进入一个Vue工程项目，然后执行以下命令： npm install vuwe --save 加载WeUI 在开始之前，需要在index.ht...
推荐使用 VARLET-VUE2：优雅的 Vue2 移动端组件库
gitblog_00057的博客
06-13 523
推荐使用 VARLET-VUE2：优雅的 Vue2 移动端组件库 在寻找一个优雅且功能强大的移动端 UI 组件库以提升你的 Vue2 项目开发效率吗？那么，VARLET-VUE2 将是你理想的选择。基于 Material Design 设计理念，这个社区驱动的项目提供了一系列高质量的通用组件，让开发者可以轻松构建出美观的移动应用。 项目介绍 VARLET-VUE2 是一款专为 Vue2 开发者设计...
Vue的组件库大全
我就是我是好孩子的博客
05-07 7436
它是由 Mozilla 团队开发的，建立在 HTML、CSS 和 JavaScript 的基础上，通过简单的标记语言和组件系统，使开发者能够轻松创建和展示交互式的 VR 和 AR 内容。
【Vue】Vue2创建移动端项目实战教程，创建移动端项目保姆级教程，设置axios，utils工具包，vue.fonfig.js配置项 （下）
qq_51055690的博客
08-14 4772
最最最详细的移动端vue2项目脚手架，有env环境，有vue.config.js，有axios，所有过程都是我一步步来的，看这一篇之前先看上两篇，因为这里是基于项目已经建好了的情况下写的。但是我改了一点东西，css预渲染器由less改成了scss。问题不是很大
移动端项目之智慧商城电商项目
05-17
2. **移动端vw适配**：在移动设备上，由于屏幕尺寸差异大，vw单位被用来实现响应式布局。1vw等于视口宽度的1%，这样可以确保元素的大小能根据屏幕宽度动态调整，从而达到自适应的效果。 3. **Request封装**：为了...
黑马智慧商城项目-vue2+vant-ui
最新发布
11-20
该项目的核心技术架构基于Vue.js框架的第二版本（Vue2），使用了Vant-UI这一专为移动端优化的UI框架，使得整个项目的用户界面美观且响应速度快，非常适合移动端用户的操作习惯。Vant-UI提供了丰富的组件库，便于开发...
nuxt3 + ts + vue3 + axios + vant + element-plus + sass + pinia vue3服务端渲染，从构建到部署，兼容pc+移动端
局外人LZ的博客
04-02 3233
简介：该教程兼容pc+移动端，如只需一端，可忽律兼容教程部分，根据需要运行的客户端构建项目。
推荐一款强大的Vue2.x移动端UI库——YDUI Touch
gitblog_00517的博客
08-09 1091
推荐一款强大的Vue2.x移动端UI库——YDUI Touch 在当今移动互联网的快速发展中，前端开发者们对于高效、易用且功能丰富的UI库有着越来越高的需求。今天，我要向大家推荐的正是这样一款优秀的产品——YDUI Touch，一只基于Vue2.x的移动端和微信UI框架。 项目介绍 YDUI Touch是一套精心设计并针对移动端优化的组件库，旨在帮助开发者快速构建现代化的移动应用。它提供了丰富的组...
Vue2 组件库 之 vant 组件库使用详解
qq_56101688的博客
01-20 8771
van-button type="primary">主要按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><van-button type="info">信息按钮</van-button>组件库：第三方 封装 好了很多很多的 组件，整合到一起就是一个组件库。Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。// 导入按需导入的配置文件。
【Vue】Vue2创建移动端项目实战教程，创建移动端项目保姆级教程，接上一篇创建Vue2项目（中）
qq_51055690的博客
09-20 4780
vue2项目适配移动端实战案例，接上一篇创建vue2项目，开发使用px不用rem
vue组件库推荐
qq_73882890的博客
07-02 455
移动端组件库：PC端（Web端）组件库：其他常用组件库：
2024年前端最全Typora设置高亮，前端驱动面试
2401_84619467的博客
05-06 874
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
小程序中使用vant
xixi的博客
01-04 272
1.npm 安装 npm i @vant/weapp -S --production 2.修改 app.json 将 app.json 中的 "style": "v2" 去除 3.修改 project.config.json { ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json",
Taro小程序使用 vue2 引入vantweapp
q4717529的博客
04-20 1532
Taro小程序使用 vue2 引入vantweapp 安装 npm i @vant/weapp --save 安装 npm i @tarojs/taro 在config 文件夹下的index.js里面 找到copy方法下的patterns把以下代码粘贴进去 { from: "node_modules/@vant/weapp/dist/", to: "src/vant/"
vant组件库的使用 - - - vue2篇&小程序篇
sywdebug的博客
12-07 9699
在需要使用组件的页面的 json 文件的"usingComponents" (使用组件)内加入想要使用的组件即可。点击上方导航栏 - - - 工具 - - - 构建 npm。然后右上角 - - - 详情里的使用 npm 模块勾上。在 main.js 文件中添加上。在其他 vue 文件可以直接使用。在其他 vue 文件可以直接使用。然后在 wxml 里就可以使用了。在 app.json 文件加入。然后在 wxml 直接使用即可。直接在 vue 文件里添加。在 main.js 中添加。然后就可以引入组件了。
基于Vue2、vant、vue-cookies&axios技术实现瑞幸咖啡项目
m0_71479134的博客
07-23 1818
本次项目以Vue2来进行开发，主要是后端为前端提供接口从而实现页面的数据渲染，该瑞幸咖啡应用APP由多个模块组成，包括商品展示、购物车、订单管理等，商品顾名思义是以咖啡类为主，满足了用户咖啡订单需求。
微信小程序Vant
LeoL1u的博客
08-11 283
微信小程序 VANT的使用方法 1.打开该项目终端 进行 npm init 进行初始化 2.下载 npm i @vant/weapp -S --production 3.打开微信小程序开发工具,构建npm 4.引入方式 a.在app.json中进行设置全局引入 // app.json "usingComponents": { "van-button": "@van
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

章小絮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值