vue - cli + mint-ui 第一步添加导航（Tabber）

　

mint-ui

前面两篇写了如何用cli创建一个 vue 项目 以及 项目目录的简介 ，那么从这篇开始就开始代码的部分了。

这次项目主要是借助 mint-ui 组件 构建一个简单的购物系统，以此加强一下对mint-ui 组件的学习 。

首先先来简单的说一下mint-ui 这个组件  ， mint-ui 是由饿了吗团队开发的一个针对web端的高效，轻量级的vue ui组件。

mint-ui 安装(这里安装2.0版本)

npm install mint-ui -S

mint-ui 引用

安装好了之后 ， 就是在 main.js 中引入mint-ui 。

这里官方提供两种方法 ：

1 、 引入全部组件

import Vue from 'vue';
import Mint from 'mint-ui';
Vue.use(Mint);

2 、 按需引用（按照需求，进行部分引用）

import {Cell,checklist} from 'mint-ui';
Vue.component(Cell.name,Cell);
Vue.component(Checklist.name,Checklist);

这里我用的是全部引用 。

这样就可以放心大胆的开撸了 

那么接下来先建一个vue 页面，在src 的目录下新建一个文件夹  pages ,然后在pages 文件夹下 创建一个index.vue。这个index就是首页。

接下来先把导航写上  ， 在页面里引入 mint-ui 的  Tabbar组件 和  Tabcontainer 。

下面直接上代码 ：

<template>
  <p class="tabbar">
    <p>
      <!--TabCotainer-->
      <mt-tab-container v-model="active">
        <mt-tab-container-item id="waimai">
          <mt-cell v-for="n in 10" :key="n" :title="'外卖'+n"></mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="dingdan">
          <mt-cell v-for="n in 5" :key="n" :title="'订单'+n"></mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="faxian">
          <mt-cell v-for="n in 7" :key="n" :title="'发现'+n"></mt-cell>
        </mt-tab-container-item>
        <mt-tab-container-item id="wode">
          <mt-cell v-for="n in 7" :key="n" :title="'我的'+n"></mt-cell>
        </mt-tab-container-item>
      </mt-tab-container>
    </p>

    <p>
      <!--Tabber-->
      <mt-tabbar v-model="active">
        <mt-tab-item id="waimai">
          <img slot="icon" src="../assets/logo.png">
          外卖
        </mt-tab-item>
        <mt-tab-item id="dingdan">
          <img slot="icon" src="../assets/logo.png">
          订单
        </mt-tab-item>
        <mt-tab-item id="faxian">
          <img slot="icon" src="../assets/logo.png">
          发现
        </mt-tab-item>
        <mt-tab-item id="wode">
          <img slot="icon" src="../assets/logo.png">
          我的
        </mt-tab-item>
      </mt-tabbar>
    </p>

  </p>
</template>
<script>

  export default {
    name: '',
    data() {
      return {
        active: 'waimai',

      }
    },
    methods: {}
  }
</script>


<style>

</style>

这里有几点需要注意 ： 

这里的active 都是一个  ，当active 和  <mt-tab-item> 标签里的 Id 相等的时候组件会自动切换显示相应的模块，我这里用的是拼音 ，是为了看的时候易懂明白，真正写的时候请自觉转化为英文。

页面写完了，接下来是加入路由。

因为vue 是单页面应用，所以每个页面之间的切换，就需要有路由来控制。

打开router文件夹下的 index.js 在里面添加本页的路由：

先是引入页面组件

import Index from '@/pages/index'

然后配置地址

{
      path: '/index',
      name: 'Index',
      component: Index
    }

都完成之后就是这样的

这样就可以在浏览器中访问到刚才的页面了。

地址栏输入http://192.168.0.136:8080/#/index 就 ok 了。

哦对了，这里说一下 192.168.0.136:8080 。正常的项目启动（npm run dev）后，地址应该为 localhost:8080， 这里我修改了 ，为了可以方便在手机上测试观看。

这个地址的配置文件在 ： config 文件夹下的 index.js文件里  

现在来看一下页面 ，顺便体验一下来回切换的快感！！！

发哦这里这次的任务就结束了  

   end

文章最后发布于: 2018-08-09 16:09:54

相关阅读