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

二、项目整体目录结构

=====================================================================

三、项目流程

=================================================================

1. vue快速创建基础项目

---

vue create hk-shop

2. 选择需要的配置

3. 创建基础文件夹目录

src文件夹下文件夹目录：

① views 文件夹存放界面

② components 文件夹存放界面中局部组件

③ config 文件夹存放各种全局配置

④ images 文件夹存放图片

⑤ plugins 文件夹存放各种插件

⑥ router 文件夹存放路由

⑦ store 文件夹存放vuex相关文件

⑧ service 文件夹存放服务器端相关操作，接口等

⑨ 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快速引入组件