一步一步 copy163： 网易严选 ---- vue-cli

参考

网易严选商城小程序全栈开发,域名备案中近期上线(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会自动根据设备情况动态设置rem的值的大小

4) 在 build 文件夹下的 util.js 中添加

  •       const px2remLoader = {
          loader: ‘px2rem-loader‘,
          options: {
          remUnit: 37.5  // remUnit为转换rem的基础 设计稿单位/等分数 = remUnit
          }
      }

      function generateLoaders (loader, loaderOptions) {
          // 添加使用 px2remLoader
          const 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,
              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: {

    // Paths
    assetsSubDirectory: ‘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 block
    width 100%
    height 18px
    border-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 none
    user-select none

.ellipsis
    overflow hidden
    text-overflow ellipsis
    white-space nowrap

.clearfix
    zoom 1

.clearfix:before,
.clearfix:after
    content ""
    display table
    clear 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 auto
    display flex
    column-count 2

原文地址：https://www.cnblogs.com/baixiaoxiao/p/10573579.html

时间： 2024-10-16 02:26:20

一步一步 copy163： 网易严选 ---- vue-cli的相关文章

一步一步学习Vue（十一）

本篇继续学习vuex,还是以实例为主:我们以一步一步学Vue(四)中讲述的例子为基础,对其改造,基于vuex重构一遍,这是原始的代码: todolist.js ; (function () { var list = []; var Todo = (function () { var id = 1; return function (title, desc) { this.title = title; this.desc = desc; this.id = id++; } })(); /** *

一步一步学Vue（十二）

为了提升代码的逼格,之后代码改为Vue文件组件,之前代码虽然读起来容易理解,而且适合在小的项目中使用,但是有如下缺点: 全局定义(Global definitions) 强制要求每个 component 中的命名不得重复 字符串模板(String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 不支持CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏 没有构建步骤(No build step) 限

一步一步学Vue（五）

本篇是是vue路由的开篇,会以一个简单的demo对vue-router进行一个介绍,主要覆盖以下几个常用场景: 1.路由跳转 2.嵌套路由 3.路由参数 1.Vue-Router 一般来说,路由定义就是定义地址访问规则,然后由路由引擎根据这些定义的规则去查找对应的页面,并转发请求给页面进行处理:对于后端来说就是这么一个模式,但前端不同,前端路由变化也只是页面内的导航比如angular中的模版切换,比如vue和react中的component切换,这种方式都是基于浏览器hash模拟url跳转. v

一步一步学习Vue（六）

本篇继续介绍vue-router,我们需要要完成这样个demo:<分页显示文章列表>:这里我们以博客园首页列表为例简化处理: 按照上图框选所示,简单分为蓝色部分文章组件(ArticleItemComponent),橙色框选部分列表组件(ArticleListComponent):分页部分我们就简单通过router-link指令构建满足演示即可,我们的代码实现逻辑: 1.列表组件初始化数据,传递给文章组件进行渲染 2.路由改变时重新初始化列表组件,更新数据 请看我们的第一版代码: <!DO

一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 项目地址:https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && np

网易严选引发精选电商大潮，头部市场成新一轮博弈点

最近互联网公司中,霉运连连的当属乐视和贾跃亭,而捷报频传.喜上眉梢的绝对是网易和丁磊. 网易第一季度财报数据显示,网易净收入和净利润连续创历史新高,多款产品排在行业前列,例如有道词典排名教育第一,网易新闻客户端仅次于腾讯,有道云笔记排名行业第二,网易云音乐排名前四.而除了这些广为人知的产品,丁磊的电商梦也开始有了起色. 7年前那场轰动了半个互联网的"养猪事件"足以证明丁磊对电商的初心,如今网易味央完成了1.6亿元的A轮融资,养猪事业可谓如火如荼,另外一边自营ODM生活电商网易严选也交出

基于Node.js+MySQL开发的开源微信小程序B2C商城（页面高仿网易严选）

高仿网易严选的微信小程序商城(微信小程序客户端) 界面高仿网易严选商城(主要是2016年wap版) 测试数据采集自网易严选商城 功能和数据库参考ecshop 服务端api基于Node.js+ThinkJS+MySQL 计划添加基于Vue.js的后台管理系统.PC版.Wap版 GitHub: https://github.com/tumobi/nideshop-mini-program 项目截图 首页 专题 分类 商品列表 商品详情 购物车 订单中心 功能列表 首页 分类首页.分类商品.新品首发.

一步一步实现混合驱动自动化测试框架的搭建

一步一步实现混合驱动自动化测试框架的搭建 实现功能: 登录126邮箱,添加联系人,然后发送邮件,带附件 数据驱动框架结构: Action: 封装的操作元素的函数,如login,添加联系人... conf: 日志配置文件 定位元素配置文件 数据库配置文件 PageObject: 一个页面是一个类,类的方法可以获取页面上的相关元素 ProjectVar: 工程路径 工程相关的全局变量 TestData:(文件或excel) 测试用例 测试数据 TestScript: 运行测试框架的主程序:入口,主要

一步一步学习JNI

本文来自网易云社区 作者:孙有军 前言 本篇的主要目的就是JNI开发入门,使大家对JNI开发流程有一个大致的了解,后续再进行深入学习. JNI不是Android特有的,JNI是Java Native Interface单词首字母的缩写,就是指用C或者C++开发的接口.JNI是JVM规范中的一部份,因此JNI程序在任何实现了JNI规范的Java虚拟机中都可以运行. 作为一个Android开发,这里不大书特书学习JNI的必要性和重要性,很多博客,文章都有讲述,这里主要给出入门步骤,让大家可以根据一步