基於vue來開發一個仿餓了麼的外賣商城（一）

時間 2019-11-30

標籤基於 vue 開發一個餓了外賣商城简体版

原文原文鏈接

1、準備工做javascript

1.大前提：已安裝好node、 npm、 vue、 vue-cli、stylus（此項目使用stylus來編譯）css

2.開發軟件：Google Chrome（建議安裝插件vue-devtools，方便調試），webstorm / sublime Text / VS Code （推薦使用webstorm，sublime 和 VS Code須要安裝相應的插件）html

3.項目結構：vue

4.項目結構分析：java

5. 圖標準備node

推薦在阿里巴巴矢量圖庫查找須要的圖標，官網地址：https://www.iconfont.cngit

使用步驟：github

a.註冊用戶web

b.按照項目需求將相應的圖標添加到庫（購物車）vue-router

c.點擊購物車，將圖標添加到項目中

d.選中Font-class，此時會出現相應的代碼鏈接，將連接複製到項目的index.html中，以下所示：

<link href="//at.alicdn.com/t/font_955721_h2wm4c3aixr.css" rel="stylesheet">

View Code

此時在編輯vue文件時能夠直接使用相應的class=「iconfont icon-xxx」來獲取相應的圖標。示例：

<span>
    <i class="iconfont icon-shangcheng"></i>
</span>

View Code

6.編譯基礎樣式

reset.css

2、移動端配置與基礎路由配置

1.使編輯頁面自適應手機屏幕（解決雙擊縮放）

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="./static/css/reset.css">

View Code

2.解決點擊響應的延時0.3s問題

300ms延遲問題：移動端的雙擊縮放

解決方法：使用fastclick，具體查看連接：http://www.cnblogs.com/lyyguniang/p/9284968.html

在index.html中編輯

<script type='application/javascript' 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);
      }
    </script>

View Code

3.使用vue-router編輯基礎路由

參考連接：http://www.cnblogs.com/SamWeb/p/6610733.html

首先下載vue-router

npm install vue-router --save

index.js

// 導入模塊
import Vue from 'vue'
import Router from 'vue-router'

// 引入組件
import Msite from '../pages/Msite/Msite.vue'
import Search from '../pages/Search/Search.vue'
import Order from '../pages/Order/Order.vue'
import Profile from '../pages/Profile/Profile.vue'

// 告訴vue使用vueRouter
Vue.use(Router)

// routes是路由的數組，有兩部分組成：path和 component，最後由router來管理路由
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/msite'
    },
    {
      path: '/msite',
      component: Msite
    },
    {
      path: '/search',
      component: Search
    },
    {
      path: '/order',
      component: Order
    },
    {
      path: '/profile',
      component: Profile
    }
  ]
})

View Code

main.js

import Vue from 'vue'
import App from './App'
// 引用路由
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App),
  router //將路由注入到跟實例中
})

View Code

問：什麼是render: h=> h(App)

查看連接：https://segmentfault.com/q/1010000007130348

vue-router包含router-link和router-view，前者負責點擊跳轉，後者負責頁面渲染。在餓了麼app中，是點擊底部導航來跳轉到相應的路由頁面的，此時在app.vue中導入底部導航組件，當點擊相應的圖標時，跳轉路由

App.vue

<template>
    <div id="app">
        <router-view/>
        <FooterGuide></FooterGuide>
    </div>
</template>

<script>
import FooterGuide from './components/FooterGuide/FooterGuide.vue'
export default {
  components: {
    FooterGuide
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
    .app
        width 100%
        height 100%
        background #f5f5f5
</style>

View Code

3、編輯底部導航FooterGuide組件

技術點：用v-on:click,$route實現點擊相應圖標跳轉路由

$route.path和class實現點擊相應的圖標的時候，圖標樣式動態改變

問：$router和$route的區別

查看連接：https://www.jianshu.com/p/fa0b5d919615

示例：

       <div class="guide_item" :class="{on: '/msite'===$route.path}" @click="goto('/msite')">
            <span class="item_icon">
                <i class="iconfont icon-changyonglogo40"></i>
            </span>
            <span>首頁</span>
        </div>

View Code

<script>
export default {
  methods: {
    goto (path) {
      this.$router.replace(path)
    }
  }
}
</script>

View Code

4、各路由靜態頁面的編輯

提示：在首頁中使用swiper來實現圖片輪播

查看官方文檔：https://www.swiper.com.cn/

首先npm install swiper --save

接着編寫html，大致格式以下：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 若是須要分頁器 -->
    <div class="swiper-pagination"></div>
</div>

View Code

編寫JavaScript

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  mounted () {
    /* eslint-disable no-new */
    new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination'
      },
      loop: true
    })
  }
}
</script>