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

① 在这里，只有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. 配置轮播图

注意：

① 下载最新版本的vue-awesome-swiper可能按照官方文档有些功能无法使用，可以直接下载低版本

② 配置分页、自动播放等功能无效的话，引入的时候加入以下代码。其他功能无效也可以试一下这个。

import Swiper2, {Navigation, Pagination, Autoplay} from ‘swiper’;

Swiper2.use([Navigation, Pagination, Autoplay]);

4. 如果想在组件中使用或者控制轮播图，可以在监听computer中对swiper进行监听，并在组件的其他地方使用。

5. 将首页的数据传输到轮播图组件中，并进行渲染

（4）中部导航nav

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

2. 将静态界面放在Nav.vue中，并在Home.vue中引入

3. 将Home.vue中请求到的数据通过props传递到Nav.vue，并进行遍历展示

（5）限时抢购

1. 在home子文件夹components内新建子文件夹flashSale，并在flashSale文件夹中新建FlashSale.vue和FlashSaleItem.vue

2. 将静态界面放在FlashSale.vue和FlashSaleItem.vue中，并在FlashSale中引入FlashSaleItem，在Home.vue中引入FlashSale

3. 将Home.vue中请求到的数据通过props传递到FlashSale.vue，再传递到FlashSaleItem.vue，并进行遍历展示

（6）配置猜你喜欢静态界面<