[Study Notes 07] Adaptation of vue3 mobile terminal

---

1. Create a project and start it

---

• npm init vue@latest
• cd demo
• npm install
• code .
• npm run dev

2. Set root font size and unit conversion

---

• Installnpm i amfe-flexible postcss-pxtorem -S
• amfe-flexible: for setting the root font size
• postcss-pxtorem: Used to automatically convert units
• Create a file in the root directory .postcssrc.js
  , main.jsimportimport 'amfe-flexible/index'

	  module.exports = {
	    plugins: {
	      "postcss-pxtorem": {
	        rootValue: 37.5,
	        propList: ["*"],
	      },
	    },
	  };

App component

<template>
  <div>
    <div class="box">
      <a href="">App组件</a>
    </div>
  </div>
</template>

<style scoped>
  body{
    
    
    font-size: 12px;
  }
  .box{
    
    
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: pink;
  }
</style>

3. Remove border distance

---

• import ‘normalize.css’
• npm i normalize.css

4. Nested use of css

---

• npm i sass

<style lang="scss" scoped>
$color: red;
@mixin yj($radius){
    
    
  border-radius: $radius;
}
  .box{
    
    
    width: 200px;
    height: 100px;
    line-height: 100px;
    font-size: 30px;
    text-align: center;
    background-color: pink;
    @include yj(10px);
    a{
    
    
      text-decoration: none;
      &:hover{
    
    
        color: fuchsia;
      }
    }
  }
</style>

5. Connect to the mobile phone to display

---

1. The mobile phone and the computer are on the same network segment. Simply speaking, the mobile phone turns on the hotspot for the computer or the computer turns on the hotspot for the mobile phone. It is possible that the computer and the mobile phone are connected to a WiFi 2. On the Internet, add
some vite.config.jscontent

6. Use of vant ui library

---

6.1 Basic usage

• Official website:https://vant-contrib.gitee.io/vant/#/zh-CN/
• Plugins:npm i vant
• Introduce component styles in main.js:import 'vant/lib/index.css';

6.2 Bottom Navigation Bar

官网

App组件

<template>
  <div>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      active:0
    }
  },
}
</script>

main.js中导入

效果显示

7. Simulate Hammer Mall

• Official website: https://www.smartisan.com/

7.1 Request data

7.2 Resolving spanning

    proxy: {
    
    
      // 选项写法
      '/api': {
    
    
        target: 'https://shopapi.smartisan.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    }

7.3 Component switching

<template>
  <div>
    <router-view></router-view>
    <van-tabbar v-model="active" active-color="#F00" route>
      <van-tabbar-item icon="wap-home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="bars" to="/list">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/myself">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

• router/index.js

import {
    
     createRouter, createWebHistory } from 'vue-router'

/*-----------------------路由的导入------------------------*/
import Home from '@/views/Home/index.vue'
import List from '@/views/List/index.vue'
import Cart from '@/views/Cart/index.vue'
import Myself from '@/views/Myself/index.vue'
/*--------------------------------------------------------*/

const router = createRouter({
    
    
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    /*----------------------首页--------------------------*/
    {
    
    
      path: '/',
      name: 'home',
      component: Home
    },
    /*----------------------分类--------------------------*/
    {
    
    
      path: '/list',
      name: 'list',
      component: List
    },
    /*----------------------购物车-------------------------*/
    {
    
    
      path: '/cart',
      name: 'cart',
      component: Cart
    },
    /*----------------------我的--------------------------*/
    {
    
    
      path: '/myself',
      name: 'myself',
      component: Myself
    },
  ]
})
export default router

7.4 Realization of carousel map

<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    
    
  data() {
    
    
    return {
    
    
      list: []
    }
  },
  created() {
    
    
    axios.get('api/mobile/new/home?channel_id=1002').then((res)=>{
    
    
      console.log(res);
      this.list=res.data.data[0].content
    })
  },
}
</script>

<style scoped>
  .my-swipe .van-swipe-item {
    
    
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>