vue移动端模板

根据项目的需求，会有做移动端项目的时候，通过vue-cli3脚手架搭建完成后，需要进行一些配置，例如rem布局、第三方组件库等等，近期做了一些移动端的配置，来分享一下。

1、通过vue-cli先创建一个vue3项目

如果不知道vue或者vue-cli，可以先了解一些，https://cn.vuejs.org/v2/guide/ 和https://cli.vuejs.org/zh/guide/prototyping.html 这两个官方网站进行了解。按照步骤安装相应的包已经创建属于自己的vue项目

2、rem布局 和 pxtorem

首先rem是css单位，相比于px固定像素单位，rem更加灵活，还有现在比较好的vm。rem是根据html元素的字体大小来计算单位的。在需求上通常都是要适配不同的手机型号，根据不同的分辨率，元素的大小能够有相应的变化，在视觉上能够做到最舒服的效果。对于移动端来说，最出名的就是阿里的lib-flexible方案，其原理就是flexible根据不同的屏幕(dpr)来计算出html的font-size大小，然后通过js来动态的修改meta标签中各属性的属性值。

pxtorem是能将px自动转化成rem，方便，说到底还是懒惰是最大的生产力。。。

安装lib-flexible

在命令行中运行: npm i lib-flexible --save-dev

引入：安装完成后，在vue项目中的main.js文件中引入 => import 'lib-flexible'

对于index.html来说，最好是不需要meta标签，因为flexible会自动添加上，因此可以删除原本的meta标签。

安装postcss-pxtorem

在命令行中运行: npm install postcss-pxtorem -D

设置规则( 更改postcss.config.js,该文件为使用vue-cli3自动创建的文件  )

3、vue移动端调试工具 vconsole

平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的。这种情况下，可以选择使用alert弹出一些信息，但是这种方法不怎么方便，也会阻断JS线程，导致后面的线程都不执行。也影响调试体验。那么，如果将console.log应用到移动端呢？需要借助第三方插件：vConsole

安装：npm install vconsole

main.js引入：import Vconsole from 'vconsole';