一步一步 copy163： 網易嚴選 ---- vue-cli

時間  2019-11-08
標籤 一步 copy163 copy 網易 vue cli 简体版
原文   原文鏈接

面試點css

  • 組件間通訊
  • 生命週期函數
  • 路由 - 參數 - 重定向
  • vuex

 

參考html

網易嚴選商城小程序全棧開發,域名備案中近期上線(mpvue+koa2+mysql)vue

小程序服務端源碼地址 node

小程序源碼地址mysql

 

功能實現 api :                    ------------ 致謝 heyushuo 點這兒給個 star 吧~webpack

首頁  https://www.heyuhsuo.xyz/heyushuo/index/indexgit

/pages/index/index.vuees6

專題  https://www.heyuhsuo.xyz/heyushuo/topic/listaction?page=1github

/pages/topic/topic.vueweb

分類  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. 添加使用 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,
                  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: {

    // 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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程