移动端智慧商城项目（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 8324
在命令行中输入以下命令创建 Vue 项目： 这里建议两个都选上，更严谨。 这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。 安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如
nuxt3 + ts + vue3 + axios + vant + element-plus + sass + pinia vue3服务端渲染，从构建到部署，兼容pc+移动端
局外人LZ的博客
04-02 3369
简介：该教程兼容pc+移动端，如只需一端，可忽律兼容教程部分，根据需要运行的客户端构建项目。
VUWE——又一个移动端Vue2组件库
weixin_33872566的博客
12-27 275
VUWE 在线预览 介绍 VUWE是一款基于微信WeUI所开发的，专用于Vue2的组件库。 它与WeUI完全解耦。用户通过自定义WeUI的样式文件，可以方便地对VUWE实现定制化。 中文文档 使用 进入一个Vue工程项目，然后执行以下命令： npm install vuwe --save 加载WeUI 在开始之前，需要在index.ht...
推荐使用 VARLET-VUE2：优雅的 Vue2 移动端组件库
gitblog_00057的博客
06-13 601
推荐使用 VARLET-VUE2：优雅的 Vue2 移动端组件库 在寻找一个优雅且功能强大的移动端 UI 组件库以提升你的 Vue2 项目开发效率吗？那么，VARLET-VUE2 将是你理想的选择。基于 Material Design 设计理念，这个社区驱动的项目提供了一系列高质量的通用组件，让开发者可以轻松构建出美观的移动应用。 项目介绍 VARLET-VUE2 是一款专为 Vue2 开发者设计...
Vue组件库
qq_64037242的博客
08-21 250
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
Vue的组件库大全
我就是我是好孩子的博客
05-07 7792
它是由 Mozilla 团队开发的，建立在 HTML、CSS 和 JavaScript 的基础上，通过简单的标记语言和组件系统，使开发者能够轻松创建和展示交互式的 VR 和 AR 内容。
【Vue】Vue2创建移动端项目实战教程，创建移动端项目保姆级教程，设置axios，utils工具包，vue.fonfig.js配置项 （下）
qq_51055690的博客
08-14 4962
最最最详细的移动端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提供了丰富的组件库，便于开发...
8、Vue 核心技术与实战 智慧商城项目 DAY8~10
m0_51394252的博客
08-23 1340
已售{{ detail.goods_sales }}件
推荐一款强大的Vue2.x移动端UI库——YDUI Touch
gitblog_00517的博客
08-09 1139
在当今移动互联网的快速发展中，前端开发者们对于高效、易用且功能丰富的UI库有着越来越高的需求。今天，我要向大家推荐的正是这样一款优秀的产品——[YDUI Touch](http://vue.ydui.org)，一只基于Vue2.x的移动端和微信UI框架。 ## 项目介绍 YDUI Touch是一套精心设计并针对移动端优化的组件库，旨在帮助开发者快速构建现代化的移动应用。它提供了丰富的组件，包括...
Vue2 组件库 之 vant 组件库使用详解
qq_56101688的博客
01-20 9193
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 4861
vue2项目适配移动端实战案例，接上一篇创建vue2项目，开发使用px不用rem
vue组件库推荐
qq_73882890的博客
07-02 573
移动端组件库：PC端（Web端）组件库：其他常用组件库：
Vue UI组件库
Zeng的博客
10-03 227
Vue常用的UI组件库
2024年前端最全Typora设置高亮，前端驱动面试
2401_84619467的博客
05-06 934
在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签。
小程序中使用vant
xixi的博客
01-04 298
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 1595
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 9771
在需要使用组件的页面的 json 文件的"usingComponents" (使用组件)内加入想要使用的组件即可。点击上方导航栏 - - - 工具 - - - 构建 npm。然后右上角 - - - 详情里的使用 npm 模块勾上。在 main.js 文件中添加上。在其他 vue 文件可以直接使用。在其他 vue 文件可以直接使用。然后在 wxml 里就可以使用了。在 app.json 文件加入。然后在 wxml 直接使用即可。直接在 vue 文件里添加。在 main.js 中添加。然后就可以引入组件了。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

章小絮

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

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

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

打赏作者

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

抵扣说明：

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

余额充值