vue项目移动端商场

一、项目前端页面展示

二、项目整体目录结构

三、项目流程
1. vue快速创建基础项目
创建项目
vue create hk-shop
1
选择需要的配置

创建基础文件夹目录
src文件夹下文件夹目录：
① views 文件夹存放界面
② components 文件夹存放界面中局部组件
③ config 文件夹存放各种全局配置
④ images 文件夹存放图片
⑤ plugins 文件夹存放各种插件
⑥ router 文件夹存放路由
⑦ store 文件夹存放vuex相关文件
⑧ service 文件夹存放服务器端相关操作，接口等
⑨ style 文件夹存放样式

2. 移动端开发——配置FastClick
什么是FastClick？
① FastClick 是一个简单易用的库，它消除了移动端浏览器上的物理点击和触发一个 click 事件之间的 300ms 的延迟 ；
② 目的就是在不干扰你目前的逻辑的同时，让你的应用感觉不到延迟，反应更加灵敏；
③ 实现原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，
并把浏览器在300ms之后真正的click事件阻止掉。

为什么会存在延时？
① 移动端浏览器会从你点击按钮之后，等待大约 300ms 才会触发点击事件
② 原因是浏览器会等待看你的行为是否会是双击

配置方法
① 将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);
}
1
2
3
4
5
6
7
8

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

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

4. 配置全局样式
在style文件夹下新建commen.less，并在里面写好全局样式
在main.js中引入

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

6. 配置路由
在router.js中，新建index.js文件夹。

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

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

① 在这里，只有DashBoard在界面刷新的时候就加载，其余界面采用懒加载的方式，在点击跳转或者访问的时候才进行加载，便于提升性能。
② dashboard一级路由存在的必要性：为后续注册登录等功能提准备。
③ 不直接export default new Router的原因：便于做路由守卫
效果

7. 集成UI组件库Vant
安装vant npm i vant –S

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

在babel.config.js中进行配置

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

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

8. 集成Vant底部Tabbar标签栏
直接借助官网API快速引入组件

active 当前选中标签的索引 Number
active-color 选中标签的颜色 String #000000
inactive-color 未选中标签的颜色 String #ffffff
replace to 路由跳转
图片属性 :src=“props.active ? icon.active : icon.inactive” 设置选中/非选中图片
9. 配置首页界面
（1）在Home.vue中，通过axios请求网络数据
安装axios npm i axios -S，并且封装axios网络请求

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

在api文件夹中新建ajax.js

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

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

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

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

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

（2）顶部地址定位、搜索栏
在home文件夹内，新建子文件夹components，存放home.vue的子组件

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

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

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

（3）轮播图（借助Swipervue-awesome-swiper实现）
在home子文件夹components内新建子文件夹sowing，并在sowing文件夹中新建Sowing.vue

安装vue-awesome-swiper npm install

配置轮播图
注意：
① 下载最新版本的vue-awesome-swiper可能按照官方文档有些功能无法使用，可以直接下载低版本
② 配置分页、自动播放等功能无效的话，引入的时候加入以下代码。其他功能无效也可以试一下这个。

import Swiper2, {Navigation, Pagination, Autoplay} from 'swiper';

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

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

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

（4）中部导航nav
在home子文件夹components内新建子文件夹nav，并在nav文件夹中新建Nav.vue

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

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

（5）限时抢购
在home子文件夹components内新建子文件夹flashSale，并在flashSale文件夹中新建FlashSale.vue和FlashSaleItem.vue

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

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

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