基于vue来开发一个仿饿了么的外卖商城(代码片段)

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

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

<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">

<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>

// 导入模块
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
    
  ]
)

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 //将路由注入到跟实例中
)

<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>

       <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>    

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

</script>

<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>

<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>