一步一步 copy163: 网易严选 ---- vue-cli
面试点
- 组件间通信
- 生命周期函数
- 路由 - 参数 - 重定向
- vuex
参考
网易严选商城小程序全栈开发,域名备案中近期上线(mpvue+koa2+mysql)
小程序服务端源码地址
小程序源码地址
功能实现 api : ------------ 致谢 heyushuo 点这儿给个 star 吧~
首页 https://www.heyuhsuo.xyz/heyushuo/index/index
/pages/index/index.vue
专题 https://www.heyuhsuo.xyz/heyushuo/topic/listaction?page=1
/pages/topic/topic.vue
分类 https://www.heyuhsuo.xyz/heyushuo/category/indexaction
/pages/category/category
分类: id https://www.heyuhsuo.xyz/heyushuo/category/currentaction?id=1005000
购物车 https://www.heyuhsuo.xyz/heyushuo/cart/cartList?openId=oQmbb4sNZdxaUQZ0sfYgvtOP2S7c
/pages/cart/cart.vue
我的 /pages/personal/personal.vue
收藏 https://www.heyuhsuo.xyz/heyushuo/collect/listAction?openId=oQmbb4sNZdxaUQZ0sfYgvtOP2S7c
地址管理 https://www.heyuhsuo.xyz/heyushuo/address/getListAction?openId=oQmbb4sNZdxaUQZ0sfYgvtOP2S7c
小程序授权登陆获取用户信息
首页包含品牌制造页、品牌制造详情页面、新品首发页面、人气推荐页面、各分类列表
商品详情页面,包含常见问题、大家都在看商品列表、加入购物车、收藏商品、立即购买、下订单、选择收货地址
搜索功能,包含历史记录、热门搜索、搜索后列表展示、模糊搜索提示
商品列表部分包含综合、价格高低进行排序
专题功能,包含专题详情、专题推荐列表
分类,包含左边大分类和右边详细分类
购物车,包含商品单选全选、左滑删除商品、下订单等功能
地址管理,包含新建地址和导入微信地址,地址编辑、左滑删除、设置默认地址
个人,包含我的收藏、地址管理、意见反馈
1. 移动端适配
<meta name="viewport" content="width=device-width,initial-scale=1.0"><!--解决点击响应延时0.3s问题--> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false); // 如果使用 {passive: false}, 会出现不能滑动的情况}if(!window.Promise) {document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');}// $(document).ready(function () {//取消浏览器默认行为document.addEventListener('touchstart',function(event){event.preventDefault();}, false)//点透!(function () {let aNodes = document.querySelectorAll('a');let i = 0;for (; i < aNodes.length; i++) {aNodes[i].addEventListener('touchstart', function () {window.location = this.href;});}})();//rem适配!(function () {let width = document.documentElement.clientWidth;let styleNode = document.createElement('style');styleNode.innerHTML = 'html{font-size: ' + width / 10 + 'px !important;}';document.head.appendChild(styleNode);})(); </script>
npm install px2rem-loader lib-flexible --save
阿里的 lib-flexible 自动计算单位,px2rem-loader 自动转换成 rem
1) 设置
<meta name="viewport" content="width=device-width,initial-scale=1.0">
说明:
因为默认的布局视口大于视觉视口,如果不设置将导致页面的内容显示非常小
原理: 将 980 的页面在 375 的屏幕上完全显示只能缩小 980 页面中的内容
- 直接设置 px 问题
px 为 css 像素单位等同于独立设备像素单位
设计师给的设计稿的单位是物理像素单位
直很多设备上接设置 px 像素单位会比设计师的要求大
3) 在项目入口文件 main.js 里 引入 "lib-flexible/flexible", flexible会自动根据设备情况动态设置rem的值的大小
4) 在 build 文件夹下的 util.js 中添加, 具体位置如图
... ... const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 37.5 // 1. remUnit为转换rem的基础 ui设计稿单位/10 = remUnit}}function generateLoaders (loader, loaderOptions) {// 2. 添加使用 px2remLoaderconst loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader, px2remLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}// Extract CSS when that option is specified// (which is the case during production build)if (options.extract) {return ExtractTextPlugin.extract({use: loaders, publicPath: "../../",fallback: 'vue-style-loader'})} else {return ['vue-style-loader'].concat(loaders)}} ... ...
2. vue-cli 搭建脚手架 Command Line Interface
下面三条命令之前做过的就不用做了
1. npm install --global webpack
2. npm install --global webpack-cli
3. npm install --global vue-cli
按照提示 npm audit fix
npm run dev 再进入 http://localhost:8080 ,可以看到成功的页面
npm install stylus stylus-loader 记得 webstorm 设置 file watchers ----> enable stylus
git init
git add .
git commit -m "项目初始化"
git remote add origin 新仓库地址
git push origin master
git checkout -b dev
git branch
3. 路由器
/src/router/index.js
import Vue from 'vue' import Router from 'vue-router'import routes from './routes'Vue.use(Router);export default new Router({routes })
/src/router/index.js
/* 路由懒加载:1. 使用 import 函数: 被引入的模块单独打包(生成一个单独的打包文件)2. 配置的component是: 返回import()得到的模块的函数, 只有当请求对应的path, 才会执行此函数, 从后台获取对应的包 好处:减小首屏需要加载的js*/ const Home = ()=>import('../pages/Home/Home.vue')export default [{path: '/home',component: Home,meta: {showFooter: true}},{path: '/',redirect: '/home'} ]
mockjs 模拟 ajax 请求数据
代理 http://m.you.163.com 的请求,支持跨域
1. /config/index.is
module.exports = {dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/', proxyTable: {'/api': { // 匹配所有以 '/api'开头的请求路径target: 'http://m.you.163.com', // 代理目标的基础路径changeOrigin: true, // 支持跨域pathRewrite: { // 重写路径: 去掉路径中开头的'/api''^/api': ''}}},
2. /src/api/request.js -------- 参考接口文档,请求后台数据
import ajax from "./ajax"const BASE = "/api" // proxTable 代理 /api 开头的请求// 获取搜索组件初始化数据 http://m.you.163.com/xhr/search/init.json export const reqInitSearch = () => ajax(`${prefix}/xhr/search/init.json`, 'POST')
图片懒加载 特效
npm install vue-lazyload
main.js
import VueLazyLoad from "vue-lazyload" import loadingGIF from "./common/img/loading.gif"Vue.use(VueLazyLoad, {loading: loadingGIF})
---- 此时内部会有一个指令 lazy
使用前:
<img :src="imgUrl" alt="img"/>
使用后:
<img v-lazy="imgUrl" :src="imgUrl" alt="img"/>
公共组件 在使用时的槽机制 ---- 以下使用的是 具名插槽 ----(还有默认插槽,作用插槽)
特点: 父组件向子组件传递数据 ---- 数据是动态的,结构也是动态的
- 槽 HeaderSlot.vue---- 很多个插孔 ---- 公共组件 ---- <slot name="xxx"></slot> ---- 中间不写样式,由卡去实现
- 卡 Personal.vue---- 选择行插一些插孔 ---- 插上了干什么用,即这个地方到底显示什么效果,由使用 卡 的父组件定义
- 效果
在一个页面使用
在另一个页面使用
App.vue 里面的全局样式
<style lang="stylus" rel="stylesheet/stylus"> /************** App.vue **************/ .my_split:before /* 灰色顶部分割线 */content ""display blockwidth 100%height 18pxborder-top 1px solid rgba(7, 17, 27, 0.1)border-bottom 1px solid rgba(7, 17, 27, 0.1)background-color: #f3f5f7.line_two_point /* 第二行出现省略号 */display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 2;-webkit-box-orient: vertical;.unSelectedAble/* 内容不可以被选中 */-webkit-user-select none-moz-user-select none-ms-user-select noneuser-select none.ellipsisoverflow hiddentext-overflow ellipsiswhite-space nowrap.clearfixzoom 1.clearfix:before, .clearfix:aftercontent ""display tableclear both</style> /*************************************/
- 1
filter 过滤器
- 定义
- 引入
和 mockjs 一样,只需引入,即可使用
- 使用
首页 /src/pages/Home
- footer
雪碧图 http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/tabBar-s43a0dc8a7d-de25ef8e19.png
- header
雪碧图 http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/hd-s9f33319f5a-b1aa4c35e6.png
下箭头 http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/arrow-down-3-799ded53ea.png
网易严选 http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/indexLogo-a90bdaae6b.png
放大镜 http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-553dba3aff.png
http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/wapNewUserEntry-b69d0624fd.png
- 轮播图
分类 /src/pages/Category
识物 /src/pages/Things
购物车 /src/pages/Shopcar
个人 /src/pages/Personal
踩坑:
1. watch 监视属性的 handler 不要掉 r,且不能用 箭头函数
vue 框架会自动绑定 this 为组件对象,如果用了箭头函数,则会按照作用域链去找 this,从而出异常
2. 使用 meta 时,嵌套路由也需要加上 相同的 meta
3. better-scroll
1) 容器必须比滑动元素小,
2) 上拉刷新的特殊情况: 初始化的页面,数据不足以撑开元素以致于滑动,也就导致不会触发 上拉事件,
解决: this.scroll = new BScroll(".容器", {...})
this.scroll.hasVerticalScroll = true // 强制开启 y 轴方向滑动
this.recScroll.on("pullingUp", async ()=>{this.moreDataPage++;await this.$store.dispatch('getMoreRecommendData', {page: this.moreDataPage, size: 5})this.recScroll.finishPullUp(); // 可以多次执行上拉刷新})
3) 瀑布流布局
html
<div class="content_wrapper"><ul class="content_show clearfix" v-if="threeTypeData"><li v-for="(topic, index) in threeTypeData.topicList" v-if="index%2 === 0" :key="index"><NotCollectionShow v-if="!topic.isCollection" :topic="topic"></NotCollectionShow><IsCollectionShow v-if="topic.isCollection" :topic="topic" :type="type"></IsCollectionShow></li></ul> </div>
css
.content_wrapper height autodisplay flexcolumn-count 2
转载于:https://www.cnblogs.com/tianxiaxuange/p/10484251.html
一步一步 copy163: 网易严选 ---- vue-cli相关推荐
- vue+flask制作一个网易严选商品评论爬虫可视化系统
文章目录 1.数据获取 1.1爬取评论信息 1.2 爬取评论标签 2.数据保存策略 3.数据处理 3.1 基于情感词典进行情感分析,词频统计 4.数据可视化 4.1 TOP积极词汇 4.2 TOP消极 ...
- vue 将字符串最后一个字符给替换_一步一步的实现Vue(一)
这次想要自己学着实现简单版的vue,从而对vue有更加深入的理解. 推荐一个好用的vscode插件,可以本地快速启动服务器,并运行html文件,且拥有热加载功能:"live server&q ...
- 一步一步学Vue(四)
接上篇.上篇中给出了代码框架,没有具体实现,这一篇会对上篇定义的几个组件进行分别介绍和完善: 1.TodoContainer组件 TodoContainer组件,用来组织其它组件,这是react中推荐 ...
- Vue+SpringBoot图书管理系统前后端分离(教你一步一步搭建)
Vue+SpringBoot图书管理系统前后端分离(教你一步一步搭建) 介绍: 说明: 环境搭建 后端环境搭建 1.新建一个工程(只有收费版的idea才有这个选项哦) 2.选择Java8 4.配置工程 ...
- 网易严选企业级微前端解决方案与落地实践
本文作者:张浩 (网易严选技术团队) 张浩,网易资深前端开发工程师,严选数据产品前端负责人.先后负责过网易企业邮箱.网易有钱.网易严选等大型项目的前端架构设计及开发.当前致力于大前端与通用能力建设.工 ...
- 网易严选全链路市场投放的数据产品策略
分享嘉宾:宋腾辉@网易严选 编辑整理:黄乐平 出品平台:DataFunTalk 导读:企业数字化转型的战斗正酣,释放数据价值成为企业当前的核心任务.本次分享主要关于网易严选内部的业务型数据产品,通过贴 ...
- 网易严选画像建设实践
文章作者:卢若浩 网易严选 内容来源:作者授权 出品平台:DataFunTalk 导读:在数字化转型的浪潮下,企业越来越重视自身数据资产的沉淀和应用.画像作为一种重要的数据资产形式,受到了越来越多的关 ...
- 【网易严选】iOS持续集成打包(Jenkins+fastlane+nginx)
本文来自网易云社区 作者:孙娇 严选iOS客户端的现有打包方式是通过远程连接打包机执行脚本去打包,打完包会输出相应的ipa的二维码,扫一扫二维码可以安装,但是随着测试队伍的壮大,外包同学越来越多,在打 ...
- 网易严选应用的云原生演进实践
1. 背景 Cloud Native 这个名词最近几年一直很火,Pivotal和CNCF 都出过相关的定义,但本质都是为了引导应用在业务日益复杂多变的场景下可以更好地利用云基建,做到更加敏捷高效.20 ...
最新文章
- 漫谈我国主流人工智能软件基础设施
- oracle常用日期函数
- 【图像处理opencv】_Jupyter 更改文件默认保存目录
- JavaScript开发
- 基于visual Studio2013解决算法导论之019栈实现(基于数组)
- galaxy s8 android pc,手机秒变PC!三星Galaxy S8桌面模式曝光
- idea的总部_雷普索尔- YPF总部
- .net 下载文件几种方式
- 如何使用idea自带的数据库可视化工具
- ASTC on Android
- Linux一键安装部署环境
- Effective C++ 读书笔记(五)
- 服务器被劫持怎么修复不了,电脑DNS被劫持怎么修复?电脑dns被劫持的完美解决方法...
- ROM制作工具如何开通超级会员?超级会员体系有什么样的功能?
- 编写ASCOM平台的驱动
- python爬取豆瓣top250信息并存入数据库中 | sqlite3
- html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
- 森林防火视频监控及指挥系统解决方案
- android自定义view之九宫格解锁
- c语言能运行情书,用C语言写的情书
热门文章
- Java——FileOutputStream,字符输出流,以字符为单位写出数据
- 关联规则—频繁项集Apriori算法
- c语言判断字符是否为某字母,判断字符是否为字母
- 索引顺序查找(分块查找)
- 群辉nas虚拟linux,UNRAID教程:3分钟 用unraid自带的虚拟机 安装 黑群晖NAS DSM系统 很强大!...
- 运维工单系统 php,运维平台体系化建设之工单系统
- android 引入sdk,导入 SDK
- python中字符串输出乱码怎么解决_python字符乱码的解决小结
- SpringMVC中注解和非注解形式配置
- QT 访问sqlite数据库