vue开发移动端&打包（有点凌乱，未完待续。。。）

一、概述移动端适配-响应式布局

前言

开发的小程序或者APP页面，需要适配种手机尺寸，适配的根本原理其实就是将设计稿按一定的比例在不同的手机上实现，通常解决移动端适配是使用rem、vw/vh进行适配。

1、 rem

rem是css3的一个相对长度单位，1rem 等于一倍的html元素的font-size值。

1-1 确定html元素的font-size值

（1）假设屏幕实际宽度是375，设计稿宽度是640，则ratio = 375/640=0.5859375;
（2）设定1rem = 100px（方便转换，即直接把设计稿上值小数点左移两位小数）
（3）设计稿上100px,换算成实际上html的值，即 1rem的html的font-size（px）值为 = 100*ratio = 58.59375px
（4）html元素的font-size转为百分比，一般浏览器中html元素的默认字号都是16px，则1rem的html的font-size = 58.59375/16= 366.2109375%

2、 vh、vw

参考

一、新建项目

npm init vue@latest

二、安装插件

下面使用vw vh来解决移动端适配 vw 视口的最大宽度，1vw等于视口宽度的百分之一 vh 视口的最大高度，1vh等于视口高度的百分之一

• 安装postcss-px-to-viewport插件，

npm install postcss-px-to-viewport -D

• 配置

在项目根目录下 新建文件 postcss-px-to-viewport.d.ts

// postcss-px-to-viewport.d.ts
declare module 'postcss-px-to-viewport' {
    type Options = {
        unitToConvert: 'px' | 'rem' | 'cm' | 'em',
        viewportWidth: number,
        viewportHeight: number, // not now used; TODO: need for different units and math for different properties
        unitPrecision: number,
        viewportUnit: string,
        fontViewportUnit: string,  // vmin is more suitable.
        selectorBlackList: string[],
        propList: string[],
        minPixelValue: number,
        mediaQuery: boolean,
        replace: boolean,
        landscape: boolean,
        landscapeUnit: string,
        landscapeWidth: number
    }
    export default function(options: Partial<Options>):any
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在tsconfig.config.json中的配置

"include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "postcss-px-to-viewport.d.ts"],
1

在vite.config.ts中的配置

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import pxtoviewport from "postcss-px-to-viewport" //插件

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    postcss: {
      plugins: [
        pxtoviewport({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 320, // UI设计稿的宽度
          // unitPrecision: 6, // 转换后的精度，即小数点位数
          // propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          // viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          // fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          // selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
          // minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          // mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          // replace: true, // 是否转换后直接更换属性值
          // landscape: false // 是否处理横屏情况
        })
      ]
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

如此，页面的px会变成vw，页面可以响应式缩放，或者根据设备屏幕大小自适配。

三、项目打包成App

1、安装JDK

下载JDK

2、配置环境变量

• 新增系统变量JAVA_HOME
  
• 在CLASSPATH变量后添加

.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

若没有就新建一个CLASSPATH变量
- 在Path变量后加添加

%JAVA_HOME%\bin

• 测试如下，配置成功~

3、安卓编辑器下载

Android studio下载

安装过程遇到问题：

先取消（）不行卸载重装，然后进入网站http://ping.chinaz.com/，进行 dl.google.com ping检查，

选择大陆响应时间最短的IP地址
将IP放进hosts文件里面

C:\Windows\System32\drivers\etc\

卸载重装后又遇到下面问题：

兵来将挡水来土掩。。。
下载Android Studio SDK(android-29）
下载后解压，

打开androidstudio，点击右下角Configure->Default Project Structure,点击选择路径到刚刚设置的目录下

4、新建项目

新建安卓设备模拟器
随便选。。。
下一步又遇到问题，，：No System Image Available
设置：

然后就可以啦，然后随便选一个系统镜像下载：