插件：npm i axios less less-loader vue-router@3 amfe-flexible postcss postcss-pxtorem vant@2

移动端的适配

使用 postcss postcss-pxtorem 这个插件是用来把px转换成rem

使用amfe-flexible 插件兼容不同设备

使用步骤

1.下载这两个插件

2.在mian.js中引入 amfe-flexible，import 'amfe-flexible'

3.在文件根目录下新建postcss.config.js

解决第三方组件库兼容问题

vant组件库的设计稿是按照375px来开发的。因此在viewportWidth为750px时会出现转换问题。

module.exports = {

plugins: {

'postcss-pxtorem': {

rootValue: 37.5,

propList: ['*'],

}}}

App.vue

<template>
  <div id="app">
    <!-- 移动端的适配 开发的 手机上打开的页面就是H5 -->
    <!-- Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源 -->
     <!-- $route当前页面路由信息 -->
     <div class="tabbar flex-sp" v-if="!$route.meta.flag">
      <div class="tabbar-item flex-column" @click="changeTab(1)">
        <img class="img-box" v-if="$route.path=='/index'" src="../src/assets/images/home-selected.png" alt="">
        <img class="img-box" v-else src="../src/assets/images/home-unselected.png" alt="">
        <div class="title">首页</div>
      </div>
      <div class="tabbar-item flex-column" @click="changeTab(2)">
        <img class="img-box" v-if="$route.path=='/category'" src="../src/assets/images/category-selected.png" alt="">
        <img class="img-box" v-else src="../src/assets/images/category-unselected.png" alt="">
        <div class="title">分类</div>
      </div>
      <div class="tabbar-item flex-column" @click="changeTab(3)">
        <img class="img-box" v-if="$route.path=='/mine'" src="../src/assets/images/mine-selected.png" alt="">
        <img class="img-box" v-else src="../src/assets/images/mine-unselected.png" alt="">
        <div class="title">我</div>
      </div>
     </div>
     <!-- <van-button type="primary">主要按钮</van-button> -->
     <div id="default_drag_return" @click="topreturn()">
      <van-icon name="back-top" />
	   </div>
     <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
    
  },
  methods:{
    changeTab(type){
      let that = this;
      if(type==1){
        that.$router.push({
          path:'/index'
        })
      }else if(type==2){
        that.$router.push({
          path:'/category'
        })
      }else{
          let token = localStorage.getItem('token')
          if(token){
              that.$router.push({
              path:'/mine'
            })
          }else{
            that.$router.push({
              path:'/login'
            })
          }
        }
    },

  },
  created(){
    console.log('this.$route',this.$route);
    
  },
  mounted(){

  }
  
}
</script>

<style lang="less" scoped>
#app{
  background-color: #f4f4f4;
  .tabbar{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 50px;
    background-color: white;
    .tabbar-item{
      .img-box{
        width: 25px;
        height: 25px;
      }
    }
  }
  
  #default_drag_return{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 25px;
	background:rgba(255, 255, 255); 
	position: fixed;
	z-index: 999;
	bottom: 70px;
	right: 20px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	color:#000000;
}

}
</style>

main.js

// App.vue是根组件
// main.js是入口js文件
// components 存放公共组件（就是以前写官网的头部和底部）
// 所有可执行的命令都在package.json中的scripts中
import Vue from 'vue'
import App from './App.vue'
import { Popup, Toast, Checkbox, CheckboxGroup, Icon, Button, Tab, Tabs, Swipe, SwipeItem ,List, Cell, TreeSelect } from 'vant';

Vue.use(Popup);
Vue.use(Toast);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Icon);
Vue.use(TreeSelect);
Vue.use(Cell);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(List);
Vue.config.productionTip = false
import 'amfe-flexible'
import router from './router'
import './styles/base.css'
import store from './store';
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

vue.config.js

// vue-cli的全局配置文件 --需要遵从commonjs规范
// vue-cli里面给你集成了webpack打包工具
// 热重载 只对src以外的东西都需要重新启动项目
// spa（单页面应用）
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  devServer:{
    proxy:{
      '/api':{ // /api代理
        // 代理的目标
        target:"https://x.dscmall.cn/api",
        ws:false,
        changeOrigin:true,
        pathRewrite:{
          '^/api':""
        }
      }
    }
  }
})

babel.config.js

// babel配置文件--babel是一个JS编译器，
// 兼容低版本浏览器，引入babel，将es6转为es5
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ],
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

postcss.config.js

// 解决第三方组件库兼容问题
// vant组件库的设计稿是按照375px来开发的。
// 因此在viewportWidth为750px时会出现转换问题
module.exports = {
    plugins: { 
     'postcss-pxtorem': { // 插件
      rootValue: 37.5,  // 1rem=37.5px
      propList: ['*'], // 所有的文件都进行转换
     }
    }
   }