移动端自我练习（初次学习）

最新推荐文章于 2024-08-23 00:00:00 发布

一染星辰

最新推荐文章于 2024-08-23 00:00:00 发布

阅读量553

点赞数 1

分类专栏：案例分享综合大复习 vue 文章标签： p2p linq gnu

本文链接：https://blog.csdn.net/weixin_59519449/article/details/122972686

版权

这篇博客记录了移动端开发的实践过程，包括在main.js中引入axios和UI库，app.vue中的组件配置，路由注册，以及组件间的交互。在商品列表页goodslist.vue中，使用$http进行数据请求，结合Vant插件实现功能。

摘要由CSDN通过智能技术生成

1. 在main.js 中引入axios ,以及mint-ui，lib 样式，vant插件，等还有请求配置根地址

2.在app.vue 里，插入mint-ui 组件，底部div模块，以及header 的标签等等，运用编程式的方式跳转路由；

3.分别是 home首页，remover会员，shopcar购物车， serach 搜索组件，且在router中的index.js 进行路由注册

4.在component 文件夹里创建文件goods 文件夹，分别创建goodslist.vue 和 goodslist.vue 两个文件

5.在首页home.vue 页面，放置九宫格，创建事件通过编程式跳转路由的方法，进入列表页面

6.在goodslist.vue 的文件里，自底层向上层，先对$http 请求，再对信息解构赋值，传入id, 对传来的参数进入显现到页面当中来

7.放置card 标签，在data里存放数据，且用vant 插件，插入计算器等等

效果图

1. 在main.js 中引入axios ,以及mint-ui，lib 样式，vant插件，等还有请求配置根地址

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

//挂载到原型上
Vue.prototype.$http=axios

//引入mint-ui
import Mint from "mint-ui";
Vue.use(Mint);

//引入样式
import "./lib/mui/css/icons-extra.css";
import "./lib/mui/css/mui.min.css";
import "./lib/mui/js/mui.min.js";

//引入mint-ui
import 'mint-ui/lib/style.css'
 
import mui from "./lib/mui/js/mui.min.js";
axios.prototype.$mui = mui;
axios.prototype.$http=axios;



//引入全局的vant
import Vant from "vant";
import "vant/lib/index.css";

Vue.use(Vant);

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

Vue.config.productionTip = false

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

2.在app.vue 里，插入mint-ui 组件，底部div模块，以及header 的标签等等，运用编程式的方式跳转路由；

<template>
  <div id="app">
   <mt-header title="long long long long title" >
  <a slot="left" @click="goback()" v-if="isshow">
    <mt-button icon="back">back</mt-button>
  </a>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>
    <router-view/>
<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar" @click="gohome">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat"  @click="gorember">
				<span class="mui-icon mui-icon-personadd"></span>
				<span class="mui-tab-label">会员</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact"  @click="gosearch">
				<span class="mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map"  @click="goshopcar">
				<span class="mui-icon mui-icon-search"></span>
				<span class="mui-tab-label">搜索</span>
			</a>
		</nav>

  </div>
</template>

<script>


export default ({
data(){
return {
isshow:true
}
},
methods:{
  gohome(){
    this.$router.push('/home')
  },
   gorember(){
    this.$router.push('/rember')
  },
   gosearch(){
    this.$router.push('/search')
  },
   goshopcar(){
    this.$router.push('/shopcar')
  },
  goback(){
      this.$router.go(-1)
  }
},

/