一、Vue如何开发移动端
1. VW VH 插件适配
开发移动端最主要的就是适配各种手机,为此我研究了一套解决方案
在之前我们用的是rem 根据HTML font-size 去做缩放
现在有了更好用的vw vh
vw 视口的最大宽度,1vw等于视口宽度的百分之一
vh 视口的最大高度,1vh等于视口高度的百分之一
1.安装依赖
npm install postcss-px-to-viewport -D
// 这个插件会把 px 转成 vw 或者 vh
因为vite中已经内联了postcss,所以并不需要额外的创建 postcss.config.js文件
2.vite.config.ts
import {
fileURLToPath, URL } from 'url'
import {
defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import postcsspxtoviewport from "postcss-px-to-viewport" // 引入插件
//----------- 如果这里 引入插件报错 可能是此时的版本 还没有提供声明文件,需要自己写,具体的在下方
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vueJsx()],
css: {
// 这边是 插件的一些配置
postcss: {
plugins: [
postcsspxtoviewport({
unitToConvert: 'px', // 要转化的单位
viewportWidth: 750, // 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 // 是否处理横屏情况
})
]
}
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
如果你用的vite 是 ts 他这个插件并没有提供声明文件,需要自己写,直接复制就可以(创建一个 postcss-px-to-viewport.d.ts文件,跟vite.config.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
}
引入声明文件 tsconfig.app postcss-px-to-viewport.d.ts跟vite.ts同级
{
"extends": "@vue/tsconfig/tsconfig.web.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "postcss-px-to-viewport.d.ts"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
最后如果没有效果 可能需要重新打开 vscode
2. 插件的使用
其实写代码就正常写, 跟以前一样 只是 这个插件会把你写的 px单位 自动转换成 vh vw。(基本适配百分之99的屏幕)
3. 将Vue 项目打包成App(安卓的)
具体的得去看视频
二、css原子化
1. css原子化介绍
CSS原子化的优缺点
1.减少了css体积,提高了css复用
2.减少起名的复杂度
3.增加了记忆成本 将css拆分为原子之后,你势必要记住一些class才能书写,哪怕tailwindcss提供了完善的工具链,你写background,也要记住开头是bg
2. 接入unocss以及基本使用
**tips:**最好用于vite, webpack属于阉割版功能很少
1.安装
npm i -D unocss
2.vite.config.ts
import unocss from 'unocss/vite'
plugins: [vue(), vueJsx(),unocss({
rul