创建移动端项目，引入vant及遇到的问题总结

一、创建移动端项目及引入vant

移动端项目，也是使用vue-cli创建，和创建vue项目的操作大致一致，只不过移动端项目需要引入vant组件，需要将px转为rem
1.首先使用创建命令vue create mobile-info
选项如下

2.引入vant组件（有改动！！）

ps：2022年11月9日更新
官网悄咪咪的把引入vant组件的密令改了。。
可以看到
vue3项目的引入命令是 npm i vant -S
vue2项目的引入命令是 npm i vant@latest-v2 -S

全局引入vant组件，在mian.js里面写入如下代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');
// 动态设置vue页面title
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
});

3.引入插件
引入px转为rem的插件 使用命令 npm i postcss-pxtorem@5.1.1
创建文件 postcss.config.js

module.exports = {
    plugins: {
        "postcss-pxtorem": {
            // 设计稿 375: 37.5
            // 设计稿：750: 75
            // Vant 是基于 375
            rootValue: 37.5,
            propList: ["*"]
        }
    }
}

二、在手机上显示移动端项目

1.首先手机和电脑连接的是同一个wifi
2.打开 cmd，输入命令 ipconfig，获取到本机的ip地址

3.在package.json文件里面，在serve后面加上 --host 获取到的ip地址

手机打开一个浏览器输入Network里面的地址
手机显示页面如下

三、1rem等于多少px

1rem等于html根元素设定的font-size的px值
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。
若是设定了html的font-size大小
如 html{font-size:14px}
则此时的1rem等于14px;

四、 单个页面设置背景颜色

比如其他的页面都是白色的，但是有个页面想要设置成灰色的

 mounted() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:rgba(239, 242, 247, 1)");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },

五、使用van-uploader上传图片，并修改van-uploader组件背景图片

html部分

<div>
 <van-uploader
   :after-read="positiveAfterRead"
   v-model="positiveFileList"
   multiple
   :max-count="1"
   class="myInfo_img_li"
 >
   <van-image class="myInfo_img_li" :src="positiveLocal" />
 </van-uploader>
 <div class="myInfo_img_text">身份证正面</div>
</div>

js部分

data() {
    return {
      positiveLocal: require("../assets/images/positive.png"),//背景图片
      positiveFileList: [],
    };
  },
  methods: {
    positiveAfterRead(e) {
      console.log(e);
    },
 }，

css部分

<style>
/* 对显示的图片和删除按钮重新设置样式 */
.myInfo_img .van-uploader__preview-image {
  width: 10rem;
  height: 8rem;
}
.myInfo_img .van-uploader__preview-delete {
  width: 1rem;
  height: 1rem;
}
.myInfo_img .van-uploader__preview-delete-icon {
  font-size: 1rem;
}
.myInfo_img {
  width: calc(100% - 2rem);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  border: 0.0625rem solid #eee;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
}
.myInfo_img_li {
  width: 10rem;
  height: 8rem;
}
.myInfo_img_text {
  text-align: center;
  line-height: 1.2rem;
}
</style>

六、跨域 No ‘Access-Control-Allow-Origin’ header is present on the requested resource

vue项目调用get请求时，不会出现跨域，但是调用post请求时，一般会涉及到跨域问题，跨域可以前端解决，也可以在后端解决
https://www.cnblogs.com/qq735675958/p/8566305.html
我刚开始也是在vue文件的vue.config.js里面设置了 proxy，但是似乎不生效，

module.exports = {
    devServer: {
        // host: '127.0.0.1',
        // port: 8080,
        // open: true,// vue项目启动时自动打开浏览器
        proxy: {
            '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
                target: "http://***", //目标地址，一般是指后台服务器地址
                changeOrigin: true, //是否跨域
                pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                    '^/api': "" 
                }
            }
        }
    }
}

然后我又想了想，以前使用nodejs写后端接口时，似乎在header里面设置下就行的，然后就去百度了，最后再跟后端哥们商量了下，让他接口文件里面加了两行代码

header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

然后请求就不再阻止了，念头通达！

七、vue项目里面配置baseUrl

八、设置vue项目初始进入时的页面title

public——>index.html 找到title标签，更改里面的内容即可

九、控制底部tabbar显示与隐藏

写一个tab的组件

<template>
  <div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="chat-o" name="message">消息</van-tabbar-item>
      <van-tabbar-item icon="contact" name="mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active:"",
    };
  },
  methods:{
    onChange(val){
      console.log(val)
      if(val=="message"){
        this.$router.push({name:'message'})
      }else if(val=="mine"){
        this.$router.push({name:'mine'})
      }
    },
  }
};
</script>

将tab组件引入到App.vue文件里面，根据在index.js里面的meta属性的showTabbar是true，还是false来控制tab的显示与隐藏

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'login',
    component: () => import('../views/login.vue'),
    meta: {
      title: '登录',//页面切换时，动态设置页面title
      showTabbar: false//控制底部tab是否显示
    }
  },
  {
    path: '/myInfo',
    name: 'myInfo',
    component: () => import('../views/myInfo.vue'),
    meta: {
      title: '我的信息',
      showTabbar: true
    }
  },
  {
    path: '/confirm',
    name: 'confirm',
    component: () => import('../views/confirm.vue'),
    meta: {
      title: '信息确认',
      showTabbar: true
    }
  },
  {
    path: '/qianyueList',
    name: 'qianyueList',
    component: () => import('../views/qianyueList.vue'),
    meta: {
      title: '我的签约',
      showTabbar: true
    }
  },
  {
    path: '/question',
    name: 'question',
    component: () => import('../views/question.vue'),
    meta: {
      title: '问题反馈',
      showTabbar: true
    }
  },
  {
    path: '/mine',
    name: 'mine',
    component: () => import('../views/mine.vue'),
    meta: {
      title: '我的',
      showTabbar: true
    }
  },
  {
    path: '/fankui',
    name: 'fankui',
    component: () => import('../views/fankui.vue'),
    meta: {
      title: '我的反馈',
      showTabbar: true
    }
  },
  {
    path: '/message',
    name: 'message',
    component: () => import('../views/message.vue'),
    meta: {
      title: '消息',
      showTabbar: true
    }
  },
]

const router = new VueRouter({
  mode: 'history',// 去掉url中的#
  routes
})

export default router

ps:2022年2月24日修改

十、手机上查看pdf文档

在手机上查看pdf，即通过接口返回的pdf链接，进行跳转

页面效果图如下