六安网站建设 220,如何做网站上抓视频,网址导航发布页,惠州市网站建设企业一、项目前端页面展示 二、项目整体目录结构 三、项目流程 1. vue快速创建基础项目 创建项目 vue create hk-shop 1 选择需要的配置 创建基础文件夹目录 src文件夹下文件夹目录#xff1a; ① views 文件夹存放界面 ② components 文件夹存放界面中局部组件 ③ config 文件夹存…一、项目前端页面展示 二、项目整体目录结构 三、项目流程 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和logoico
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配置猜你喜欢静态界面
