Vue+mint-ui快速构建出属于自己的移动商城项目框架

如果不晓得如何构建新的项目点这里。mint-ui是一个基于Vue.js的移动端组件库，可以快速的选择我们需要的组件来构建项目。

Mint-ui的下载与使用

1：安装

在项目中打开终端，输入

// 安装
# Vue 1.x
npm install mint-ui@1 -S
# Vue 2.0
npm install mint-ui -S

等待下载，查看package.json文件，就可以看到依赖已经设置好了

2：使用示例

（1）引入mint-ui全部的组件库

在src/main.js入口文件中加入这句话

// 使用mint-ui 引入全部组件
import Mint from 'mint-ui';
Vue.use(Mint);
// 引入Mint-ui的css文件
import 'mint-ui/lib/style.css'

（2）找到一个中意的组件

添加链接描述我们到这里来挑选一个想要的顶部框，

查看效果：

二、项目逐渐搭建

1：底部栏的创建

同样的我们进入底部栏选择，挑选一个中意的底部栏，及西宁复制

注意代码中红框框起来的部分，png的路径需要修改，我们暂时使用项目初始化时就有的一张图片，然后selected对象也需要声明一下：

2：点击底部栏进行页面切换

有了底部栏，我们首先要做的就是，点击某个底部栏，我们可以跳转至相应的组件，此时刚才的selected对象就派上用场了。
写入如下代码

<template>
  <div id="app">
    <!--顶部栏取余-->
    <mt-header title="电商平台App">
      <router-link to="/" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>

    <!--路由组件的出口-->
    <router-view/>


    <!--底部栏-->
    <mt-tabbar v-model="selected">
      <mt-tab-item id="index">
        <img slot="icon" src="./assets/logo.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="vip">
        <img slot="icon" src="./assets/logo.png">
        分类
      </mt-tab-item>
      <mt-tab-item id="shopcart">
        <img slot="icon" src="./assets/logo.png">
        购物车
      </mt-tab-item>
      <mt-tab-item id="search">
        <img slot="icon" src="./assets/logo.png">
        我的
      </mt-tab-item>
  </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      selected:''
    }
  },
  watch:{
    selected:function(newV, oldV){
      console.log(newV);
    }
  }
}
</script>

<style>
*{
  padding:0;
  margin:0;
}
</style>

然后我们需要做的事情有以下几步

• 在入口组建App.vue中使用获得的id进行页面跳转

  watch:{
    selected:function(newV, oldV){
      this.$router.push({name:this.selected});
    }
  }

• 创建components/Home/Home.vue文件，存放我们首页的组件，给他取名为Home，给他加上简单的样式
  
• 在index.js文件中配置路由信息

import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'


//引入
import Home from '@/components/Home/Home'

Vue.use(Router)

export default new Router({
  //匹配的路由规则
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    }
  ]
})

点击首页就可以成功渲染了