实战Vue：基于Vue的移动端购物商城

⑨ style 文件夹存放样式

2. 移动端开发——配置FastClick

---

1. 什么是FastClick？

① FastClick 是一个简单易用的库，它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟 ；

② 目的就是在不干扰你目前的逻辑的同时，让你的应用感觉不到延迟，反应更加灵敏；

③ 实现原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，

并把浏览器在300ms之后真正的click事件阻止掉。

2. 为什么会存在延时？

① 移动端浏览器会从你点击按钮之后，等待大约 300ms 才会触发点击事件

② 原因是浏览器会等待看你的行为是否会是双击

3. 配置方法

① 将fastclick拉取到项目中 npm i fastclick -S

② 配置方案

Ⅰ直接在main.js中进行配置

main.js

// 1. 引入FastClick

import FastClick from ‘fastclick’

// 2. 配置FastClick

if (‘addEventListener’ in document) {

document.addEventListener(‘DOMContentLoaded’, function () {

FastClick.attach(document.body);

}, false);

}

Ⅱ 在plugin文件夹中新建FastClick.js并在其中配置，并将其在main.js中引入

3. 在public文件夹下的index.html中，修改页面标题（title）和logo（ico）

---

4. 配置全局样式

---

1. 在style文件夹下新建commen.less，并在里面写好全局样式

2. 在main.js中引入

5. 搭建主界面

---

1. 要进行多界面切换，要在views文件夹内进行配置不同界面。在views文件夹下，每一个模块对应一个子文件夹。home — 主页、category — 分类、cart — 购物车、mine — 我的、dashboard — 主面板。

2. 在每一个子文件夹（home、category、cart、mine、dashboard）下创建对应的页面。

举例：dashboard.vue

6. 配置路由

---

1. 在router.js中，新建index.js文件夹。

2. 在main.js中，引入router。并将其挂载到Vue对象上。

3. 在新建的index.js中，配置路由

① 在这里，只有DashBoard在界面刷新的时候就加载，其余界面采用懒加载的方式，在点击跳转或者访问的时候才进行加载，便于提升性能。

② dashboard一级路由存在的必要性：为后续注册登录等功能提准备。

③ 不直接export default new Router的原因：便于做路由守卫

4. 效果

7. 集成UI组件库Vant

---

1. 安装vant npm i vant –S

2. 安装babel-plugin-impor支持vant局部引用 npm i babel-plugin-import -D

3. 在babel.config.js中进行配置

4. 在plugins文件夹下，新建vant.js。配置引入不同的vant组件。

5. 在main.js中引入vant.js。需要引入什么组件直接在vant.js中做修改即可。

8. 集成Vant底部Tabbar标签栏

---

直接借助官网API快速引入组件

1. active 当前选中标签的索引 Number

2. active-color 选中标签的颜色 String #000000

3. inactive-color 未选中标签的颜色 String #ffffff

4. replace to 路由跳转

5. 图片属性 :src=“props.active ? icon.active : icon.inactive” 设置选中/非选中图片

9. 配置首页界面

---

（1）在Home.vue中，通过axios请求网络数据

1. 安装axios npm i axios -S，并且封装axios网络请求

2. 在service文件夹中，新建子文件夹api，并在api中新建文件index.js。负责汇总各种接口。

3. 在api文件夹中新建ajax.js

4. 在ajax.js中封装axios网络请求，并以函数ajax的形式向外界暴露

5. 在index.js中，从ajax.js中引入ajax方法

6. 在index.js中，定义接口基础路径

7. 在index.js中，定义getHomeData方法，该方法是请求主页的数据，为get方法，拼接完整URL调用ajax方法发起axios的get请求，并向外界暴露该方法。

8. 在Home.vue中，引入数据请求方法，并在创建组件完成后的created钩子选项中发起ajax请求。

（2）顶部地址定位、搜索栏

1. 在home文件夹内，新建子文件夹components，存放home.vue的子组件

2. 在子文件夹components中新建header文件夹，在header文件夹内新建Header.vue组件

3. 在Header.vue中将写好的html即样式拷贝过来

4. 在Home.vue中引入组件Header.vue

（3）轮播图（借助Swipervue-awesome-swiper实现）

1. 在home子文件夹components内新建子文件夹sowing，并在sowing文件夹中新建Sowing.vue

2. 安装vue-awesome-swiper npm install

3. 配置轮播图