移动端学习（初级二）

目录

 1. 在main.js 里， 配置 axios ,引入mint-ui, 样式等等，且重要的是配置根地址

2.在App.vue 文件里，引入 mui里的底部代码，利用编程式的方式实现跳转页面；且创建 home(首页)组件，rember(会员)组件， shopcar(购物车)组件， search(搜索)组件等

3.在router 中的index.js 中进行路由设置

4.在components 里创建subcom 组件，创建swipe 轮播图组件

 5，在home 首页，注册swipe组件，并引入九宫格

6.swipe组件，对轮播图进行v-for 循环，给其样式让其撑起来

7.在goods文件里分别创建 goodsinfo.vue  和goodslist.vue组件

 8.在goodslist.vue

9.goodsinfo.vue

10.shopcar购物车

---

效果图

 

 

 

 1. 在main.js 里， 配置 axios ,引入mint-ui, 样式等等，且重要的是配置根地址

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

import "./lib/mui/css/mui.min.css"

import './lib/mui/css/icons-extra.css'
import './lib/mui/js/mui.min.js'

import mui from  "./lib/mui/js/mui.min.js"
Vue.prototype.$mui = mui;
Vue.prototype.$http = axios;

import VuePreview from 'vue-preview';
Vue.use(VuePreview);


import moment from "moment"

//全局封装一个时间处理的过滤器；
Vue.filter("timeformat",function(val){
   //用moment 中的方法；
   return moment(val).format('MMMM Do YYYY')
});

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);



//配置请求的根地址；
axios.defaults.baseURL  = 'http://www.liulongbin.top:3005';

// axios.get("/login");
//  http://www.liulongbin.top:3005/login
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.在App.vue 文件里，引入 mui里的底部代码，利用编程式的方式实现跳转页面；且创建 home(首页)组件，rember(会员)组件， shopcar(购物车)组件， search(搜索)组件等

<template>
  <div id="app">
    <mt-header title="网站名称">
      <a slot="left" @click="goback()" v-if="isshow">
        <mt-button icon="back">返回</mt-button>
      </a>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>

    <div style="margin-bottom:50px">
      <router-view />
    </div>

    <nav class="mui-bar mui-bar-tab">
      <p class="mui-tab-item mui-active" href="#tabbar" @click="gohome">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </p>

      <p class="mui-tab-item" href="#tabbar-with-chat" @click="gomember">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">会员</span>
      </p>

      <p class="mui-tab-item" href="#tabbar-with-contact" @click="goshopcar">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
          <span class="mui-badge">{
  {this.$store.getters.getallcount}}</span>
        </span>
        <span class="mui-tab-label">购物车</span>
      </p>

      <p class="mui-tab-item" href="#tabbar-with-map" @click="gosearch">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">搜索</span>
      </p>
    </nav>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isshow:false
    };
  },
  methods: {
    gohome() {
      this.$router.push("/home");
    },
    gomember() {
      this.$router.push("/member");
    },
    goshopcar() {
      this.$router.push("/shopcar");
    },
    gosearch() {
      this.$router.push("/search");
    },
    //返回 上一级；
    goback(){
      this.$router.go(-1);
    }
  },

  watch:{
    $route:{
      immediate:true,
      handler(newdata){
        if(newdata.path=="/home"){
          this.isshow = false;
        }else{
          this.isshow = true;
        }
      }
    }
  }
};
</script>

<style lang="less">
</style>