vue快速创建基础项目

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

实现原理:

在检测到touchend事件的时候会通过DOM自定义事件立即出发模拟一个click事件

为什么会存在延时

document.addEventListener(DOMContentLoaded,

function

FastClick.attach(document.body);

false);

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

在public文件夹下的index.html中修改页面标题title和logoico

配置全局样式

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

在main.js中引入

要进行多界面切换要在views文件夹内进行配置不同界面。

在views文件夹下每一个模块对应一个子文件夹。

home

主页、category

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

举例dashboard.vue

在main.js中引入router。

并将其挂载到Vue对象上。

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

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

不直接export

在plugins文件夹下新建vant.js。

配置引入不同的vant组件。

在main.js中引入vant.js。

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

集成Vant底部Tabbar标签栏

在service文件夹中新建子文件夹api并在api中新建文件index.js。

负责汇总各种接口。

在api文件夹中新建ajax.js

在ajax.js中封装axios网络请求并以函数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组件

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

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

安装vue-awesome-swiper

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

配置分页、自动播放等功能无效的话引入的时候加入以下代码。

其他功能无效也可以试一下这个。

import

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

4中部导航nav

在home子文件夹components内新建子文件夹nav并在nav文件夹中新建Nav.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配置猜你喜欢静态界面