1.明确功能模块

启动准备好的代码，演示移动端面经内容，明确功能模块

2.项目收获

vue-cli 建项目

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

2.创建项目

• 选项

• 手动选择功能

• 选择vue的版本

• 是否使用history模式

• 选择css预处理

• 选择eslint的风格 （eslint 代码规范的检验工具，检验代码是否符合规范）
• 比如：const age = 18; => 报错！多加了分号！后面有工具，一保存，全部格式化成最规范的样子

• 选择校验的时机 （直接回车）

• 选择配置文件的生成方式 （直接回车）

• 是否保存预设，下次直接使用？ => 不保存，输入 N

• 等待安装，项目初始化完成

• 启动项目

强烈建议大家严格按照老师的步骤进行调整，为了符合企业规范

为了更好的实现后面的操作，我们把整体的目录结构做一些调整。

目标:

1. 删除初始化的一些默认文件
2. 修改没删除的文件
3. 新增我们需要的目录结构

1.删除文件

• src/assets/logo.png
• src/components/HelloWorld.vue
• src/views/aboutView.vue
• src/views/HomeView.vue

2.修改文件

不需要修改

删除默认的路由配置

3.新增目录

• src/api 目录
  • 存储接口模块 (发送ajax请求接口的模块)
• src/utils 目录
  • 存储一些工具模块 (自己封装的方法)

目录效果如下:

组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

比如日历组件、键盘组件、打分组件、下拉筛选组件等

组件库并不是唯一的，常用的组件库还有以下几种：

pc: element-ui element-plus iview ant-design

移动：vant-ui Mint UI (饿了么) Cube UI (滴滴)

目标：明确 全部导入 和 按需导入 的区别

区别：

1.全部导入会引起项目打包后的体积变大，进而影响用户访问网站的性能

2.按需导入只会导入你使用的组件，进而节约了资源

• 在main.js中

• 即可使用

vant-ui提供了很多的组件，全部导入，会导致项目打包变得很大。

• 安装一个插件

• 在中配置

• 按需加载，在

• 中进行测试

• 把引入组件的步骤抽离到单独的js文件中比如

main.js中进行导入

官方说明：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/advanced-usage

• 项目根目录， 新建postcss的配置文件

viewportWidth:设计稿的视口宽度

1. vant-ui中的组件就是按照375的视口宽度设计的
2. 恰好面经项目中的设计稿也是按照375的视口宽度设计的，所以此时 我们只需要配置375就可以了
3. 如果设计稿不是按照375而是按照750的宽度设计，那此时这个值该怎么填呢？

但凡是单个页面，独立展示的，都是一级路由

路由设计：

• 登录页
• 首页架子
  • 首页 - 二级
  • 分类页 - 二级
  • 购物车 - 二级
  • 我的 - 二级
• 搜索页
• 搜索列表页
• 商品详情页
• 结算支付页
• 我的订单页

配置一级路由，新建对应的页面文件

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/tabbar

引入组件

1. 复制官方代码
2. 修改显示文本及显示的图标
3. 配置高亮颜色

1. 配置二级路由

2. 准备对应的组件文件

3. 配置路由出口, 配置 tabbar

(1) 准备工作

1. 新建 重置默认样式

2. main.js 中导入应用

3. 将准备好的一些图片素材拷贝到 assets 目录【备用】

(2) 登录静态布局

使用组件

• van-nav-bar

注册

使用

添加通用样式

设置导航条，返回箭头颜色

基地址：http://cba.itlike.com/public/index.php?s=/api/

我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址,请求响应拦截器等等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

目标：将 axios 请求方法，封装到 request 模块

1. 安装 axios

2. 新建 封装 axios 模块

   利用 axios.create 创建一个自定义的 axios 来使用

   http://www.axios-js.com/zh-cn/docs/#axios-create-config

3. 获取图形验证码，请求测试

1. 准备数据，获取图形验证码后存储图片路径，存储图片唯一标识

2. 动态渲染图形验证码，并且点击时要重新刷新验证码

**1.目标：**将请求封装成方法，统一存放到 api 模块，与页面分离

2.原因：以前的模式

• 页面中充斥着请求代码

• 可阅读性不高

• 相同的请求没有复用请求没有统一管理

3.期望：

• 请求与页面逻辑分离
• 相同的请求可以直接复用请求
• 进行了统一管理

4.具体实现

新建 提供获取图形验证码 Api 函数

页面中调用测试

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/toast

两种使用方式

1. 导入调用 ( 组件内 或 非组件中均可 )

2. 通过this直接调用 ( **组件内 **)

main.js 注册绑定到原型

(1) 倒计时基础效果

1. 准备 data 数据

2. 给按钮注册点击事件

3. 开启倒计时时

4. 离开页面销毁定时器

(2) 验证码请求校验处理

1. 输入框 v-model 绑定变量

2. methods中封装校验方法

3. 请求倒计时前进行校验

(3) 封装接口，请求获取验证码

2. 调用接口，添加提示

提供登录 Api 函数

登录功能

响应拦截器是咱们拿到数据的 第一个 “数据流转站”，可以在里面统一处理错误，只要不是 200 默认给提示，抛出错误

1. 新建 vuex user 模块 store/modules/user.js

2. 挂载到 vuex 上

3. 提供 mutations

4. 页面中 commit 调用

1. 新建 封装方法

2. vuex user 模块持久化处理

1. 请求时，打开 loading

2. 响应时，关闭 loading

目标：基于全局前置守卫，进行页面访问拦截处理

说明：智慧商城项目，大部分页面，游客都可以直接访问, 如遇到需要登录才能进行的操作，提示并跳转到登录

但是：对于支付页，订单页等，必须是登录的用户才能访问的，游客不能进入该页面，需要做拦截处理

路由导航守卫 - 全局前置守卫

1.所有的路由一旦被匹配到，都会先经过全局前置守卫

2.只有全局前置守卫放行，才会真正解析渲染组件，才能看到页面内容

1. 静态结构和样式

2. 新建

3. 组件按需引入

1. 封装准备接口

2. 页面中请求调用

3. 轮播图、导航、猜你喜欢渲染

4. 商品组件内，动态渲染

1. 静态结构和代码

2. 组件按需导入

1. data 中提供数据，和搜索框双向绑定 (实时获取用户内容)

2. 准备假数据，进行基本的历史纪录渲染

3. 点击搜索，或者下面搜索历史按钮，都要进行搜索历史记录更新 (去重，新搜索的内容置顶)

4. 清空历史

1. 持久化到本地 - 封装方法

2. 页面中调用 - 实现持久化

(1) 搜索关键字搜索

1. 计算属性，基于query 解析路由参数

2. 根据不同的情况，设置输入框的值

3. 封装接口，获取搜索商品

4. 页面中基于 goodsName 发送请求，动态渲染

(2) 分类id搜索

1 封装接口

2 分类页静态结构

3 搜索页，基于分类 ID 请求

静态结构 和 样式

是 指令，使用前需要对指令进行注册。

1. 动态路由参数，获取商品 id

2. 封装 api 接口

3. 一进入页面发送请求，获取商品详情数据

4. 动态渲染

2. 页面调用获取数据

3. 动态渲染评价

1. 按需导入 van-action-sheet

2. 准备 van-action-sheet 基本结构

3. 注册点击事件，点击时唤起弹窗

4. 完善结构

5. 动态渲染

1. 封装组件

2. 使用组件

说明：加入购物车，是一个登录后的用户才能进行的操作，所以需要进行鉴权判断，判断用户 token 是否存在

1. 若存在：继续加入购物车操作
2. 不存在：提示用户未登录，引导到登录页

1. 按需注册 dialog 组件

2. 按钮注册点击事件

3. 添加 token 鉴权判断，跳转携带回跳地址

4. 登录后，若有回跳地址，则回跳页面

2. 页面中调用请求

3. 请求拦截器中，统一携带 token

4. 准备小图标

5. 定制样式

1. 基本结构

2. 按需导入组件

1. 新建 模块

2. 挂载到 store 上面

3. 封装 API 接口

4. 封装 action 和 mutation

5. 页面中 dispatch 调用

1. 将数据映射到页面

2. 动态渲染

1. 封装 getters：商品总数 / 选中的商品列表 / 选中的商品总数 / 选中的商品总价

2. 页面中 mapGetters 映射使用

1. 全选 getters

2. 点击小选，修改状态

3. 点击全选，重置状态

1. 封装 api 接口

2. 页面中注册点击事件，传递数据

3. 提供 action 发送请求， commit mutation

1. data 提供数据, 定义是否在编辑删除的状态

2. 注册点击事件，修改状态

3. 底下按钮根据状态变化

4. 监视编辑状态，动态控制复选框状态

1. 查看接口，封装 API ( 注意：此处 id 为获取回来的购物车数据的 id )

2. 注册删除点击事件

3. 提供 actions

1. 外面包个大盒子，添加 v-if 判断

2. 相关样式

所谓的 “立即结算”，本质就是跳转到订单结算台，并且跳转的同时，需要携带上对应的订单参数。

而具体需要哪些参数，就需要基于 【订单结算台】 的需求来定。

准备静态页面

(2) 获取收货地址列表

1 封装获取地址的接口

2 页面中 - 调用获取地址

3 页面中 - 进行渲染

(3) 订单结算 - 封装通用接口

**思路分析：**这里的订单结算，有两种情况：

1. 购物车结算，需要两个参数

   ① mode=“cart”

   ② cartIds=“cartId, cartId”

2. 立即购买结算，需要三个参数

   ① mode=“buyNow”

   ② goodsId=“商品id”

   ③ goodsSkuId=“商品skuId”

都需要跳转时将参数传递过来

---

封装通用 API 接口

(4) 订单结算 - 购物车结算

1 跳转时，传递查询参数

2 页面中接收参数, 调用接口，获取数据

3 基于数据进行渲染

(5) 订单结算 - 立即购买结算

1 点击跳转传参

2 计算属性处理参数

3 基于请求时携带参数发请求渲染

(6) mixins 复用 - 处理登录确认框的弹出

1 新建一个 mixin 文件

2 页面中导入，混入方法

3 页面中调用 混入的方法

1 封装 API 通用方法（统一余额支付）

2 买家留言绑定

3 注册点击事件，提交订单并支付

1 基础静态结构

2

3 导入注册

(2) 点击 tab 切换渲染

1 封装获取订单列表的 API 接口

2 给 tab 绑定 name 属性

3 封装调用接口获取数据

4 动态渲染

1 封装获取个人信息 - API接口

2 调用接口，获取数据进行渲染

1 注册点击事件

2 提供方法

vue脚手架只是开发过程中，协助开发的工具，当真正开发完了 => 脚手架不参与上线

参与上线的是 => 打包后的源代码

打包：

• 将多个文件压缩合并成一个文件
• 语法降级
• less sass ts 语法解析, 解析成css
• …

打包后，可以生成，浏览器能够直接运行的网页 => 就是需要上线的源码！

(1) 打包命令

vue脚手架工具已经提供了打包命令，直接使用即可。

在项目的根目录会自动创建一个文件夹,dist中的文件就是打包后的文件，只需要放到服务器中即可。

(2) 配置publicPath

(3) 路由懒加载

路由懒加载 & 异步组件， 不会一上来就将所有的组件都加载，而是访问到对应的路由了，才加载解析这个路由对应的所有组件

官网链接：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E4%BD%BF%E7%94%A8-webpack

    以上就是本篇文章【Vue2+Vue3基础入门到实战项目（七）—— 智慧商城 项目】的全部内容了，欢迎阅览 ！ 文章地址：http://dfvalve.xrbh.cn/news/7871.html 
     资讯      企业新闻      行情      企业黄页      同类资讯      首页      网站地图      返回首页 迅博思语资讯移动站 http://keant.xrbh.cn/ , 查看更多