App.vue 组件的基本设置

• 头部的固定导航栏使用 Mint-UI 的 Header 组件；
• 底部的页签使用 mui 的 tabbar;
• 购物车的图标，使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart，同时，应该把其依赖的字体图标文件 mui-icons-extra.ttf，复制到 fonts 目录下！
• 将底部的页签，改造成 router-link 来实现单页面的切换；
• Tab Bar 路由激活时候设置高亮的两种方式：
  
  

• 全局设置样式如下：
• [AppleScript] 纯文本查看 复制代码

  	.router-link-active{
  
        	color:#007aff !important;
  
      }
  

• 或者在 new VueRouter 的时候，通过 linkActiveClass 来指定高亮的类：
• [AppleScript] 纯文本查看 复制代码

  // 创建路由对象
  
      var router = new VueRouter({
  
        routes: [
  
          { path: '/', redirect: '/home' }
  
        ],
  
        linkActiveClass: 'mui-active'
  
      });

• 实现 tabbar 页签不同组件页面的切换
  • 将 tabbar 改造成 router-link 形式，并指定每个连接的 to 属性；
  • 在入口文件中导入需要展示的组件，并创建路由对象：
  • [AppleScript] 纯文本查看 复制代码

     // 导入需要展示的组件
    
        import Home from './components/home/home.vue'
    
        import Member from './components/member/member.vue'
    
        import Shopcar from './components/shopcar/shopcar.vue'
    
        import Search from './components/search/search.vue'
    
    
    
        // 创建路由对象
    
        var router = new VueRouter({
    
          routes: [
    
            { path: '/', redirect: '/home' },
    
            { path: '/home', component: Home },
    
            { path: '/member', component: Member },
    
            { path: '/shopcar', component: Shopcar },
    
            { path: '/search', component: Search }
    
          ],
    
          linkActiveClass: 'mui-active'
    
        });
    

  • 使用 mt-swipe 轮播图组件
  • 假数据：
    
  • [AppleScript] 纯文本查看 复制代码

    lunbo: [
    
            'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',
    
            'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',
    
            'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'
    
          ]

    
    
  • 引入轮播图组件：
    
  • [AppleScript] 纯文本查看 复制代码

    <!-- Mint-UI 轮播图组件 -->
    
        <div class="home-swipe">
    
          <mt-swipe :auto="4000">
    
            <mt-swipe-item v-for="(item, i) in lunbo" :key="i">
    
              <img :src="item" alt="">
    
            </mt-swipe-item>
    
          </mt-swipe>
    
        </div>
    
      </div>
    

    
    
  • 在.vue组件中使用vue-resource获取数据
    • 运行cnpm i vue-resource -S安装模块
    • 导入 vue-resource 组件
    • [AppleScript] 纯文本查看 复制代码

      import VueResource from 'vue-resource'

    • 在vue中使用 vue-resource 组件
    • [AppleScript] 纯文本查看 复制代码

      Vue.use(VueResource);

      
      
    
    
    
  
  

App.vue 组件的基本设置

• 头部的固定导航栏使用 Mint-UI 的 Header 组件；
• 底部的页签使用 mui 的 tabbar;
• 购物车的图标，使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart，同时，应该把其依赖的字体图标文件 mui-icons-extra.ttf，复制到 fonts 目录下！
• 将底部的页签，改造成 router-link 来实现单页面的切换；
• Tab Bar 路由激活时候设置高亮的两种方式：
  
  

• 全局设置样式如下：
• [AppleScript] 纯文本查看 复制代码

  	.router-link-active{
  
        	color:#007aff !important;
  
      }
  

• 或者在 new VueRouter 的时候，通过 linkActiveClass 来指定高亮的类：
• [AppleScript] 纯文本查看 复制代码

  // 创建路由对象
  
      var router = new VueRouter({
  
        routes: [
  
          { path: '/', redirect: '/home' }
  
        ],
  
        linkActiveClass: 'mui-active'
  
      });

• 实现 tabbar 页签不同组件页面的切换
  • 将 tabbar 改造成 router-link 形式，并指定每个连接的 to 属性；
  • 在入口文件中导入需要展示的组件，并创建路由对象：
  • [AppleScript] 纯文本查看 复制代码

     // 导入需要展示的组件
    
        import Home from './components/home/home.vue'
    
        import Member from './components/member/member.vue'
    
        import Shopcar from './components/shopcar/shopcar.vue'
    
        import Search from './components/search/search.vue'
    
    
    
        // 创建路由对象
    
        var router = new VueRouter({
    
          routes: [
    
            { path: '/', redirect: '/home' },
    
            { path: '/home', component: Home },
    
            { path: '/member', component: Member },
    
            { path: '/shopcar', component: Shopcar },
    
            { path: '/search', component: Search }
    
          ],
    
          linkActiveClass: 'mui-active'
    
        });
    

  • 使用 mt-swipe 轮播图组件
  • 假数据：
    
  • [AppleScript] 纯文本查看 复制代码

    lunbo: [
    
            'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',
    
            'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',
    
            'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'
    
          ]

    
    
  • 引入轮播图组件：
    
  • [AppleScript] 纯文本查看 复制代码

    <!-- Mint-UI 轮播图组件 -->
    
        <div class="home-swipe">
    
          <mt-swipe :auto="4000">
    
            <mt-swipe-item v-for="(item, i) in lunbo" :key="i">
    
              <img :src="item" alt="">
    
            </mt-swipe-item>
    
          </mt-swipe>
    
        </div>
    
      </div>
    

    
    
  • 在.vue组件中使用vue-resource获取数据
    • 运行cnpm i vue-resource -S安装模块
    • 导入 vue-resource 组件
    • [AppleScript] 纯文本查看 复制代码

      import VueResource from 'vue-resource'

    • 在vue中使用 vue-resource 组件
    • [AppleScript] 纯文本查看 复制代码

      Vue.use(VueResource);