有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue3移动端适配(搭建app移动端适配的3种方法)实现方式

vue 炮渣日记 3周前 (11-11) 102次浏览 已收录 0个评论 扫描二维码

一、引入vant的几种方式

(1)引入全部组件,在没有配置按需引入的前提下


main.js中
// 引入vant (引入全部组件) Tips: 配置按需引入后,将不允许直接导入所有组件。
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp(App)
app.use(store)
  .use(router)
  .use(Vant)
  .mount('#app')

(2)手动按需引入

main.js中
// 手动按需引入
import Button from 'vant/lib/button';
import 'vant/lib/button/style';

app.use(store)
  .use(router)
  // 手动按需引入
  .use(Button)
  .mount('#app')
 babel.config.js 文件中
  module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
  ],
  // 自动按需引入
    plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

适配方式

第一种适配方式 viewport

安装   cnpm install postcss-px-to-viewport -D
新建postcss.config.js 
  module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

或者
module.exports = {
  plugins: {
    autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 要转化的单位
      viewportWidth: 750, // UI设计稿的宽度
      unitPrecision: 6, // 转换后的精度,即小数点位数
      propList: ["*"], // 指定转换的css属性的单位,*代表全部css属性的单位都进行转换
      viewportUnit: "vw", // 指定需要转换成的视窗单位,默认vw
      fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位,默认vw
      selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名,
      minPixelValue: 1, // 默认值1,小于或等于1px则不进行转换
      mediaQuery: true, // 是否在媒体查询的css代码中也进行转换,默认false
      replace: true, // 是否转换后直接更换属性值
      exclude: [/node_modules/], // 设置忽略文件,用正则做目录名匹配
      landscape: false, // 是否处理横屏情况
    },
  },
};

第二种方式 vant 提供的rem

在vue.config.js中添加

vue3移动端适配(搭建app移动端适配的3种方法)实现方式

在main.js中添加

import ‘amfe-flexible’;

或者在postcss.config.js中添加 (两种方式任选其一。)

vue3移动端适配(搭建app移动端适配的3种方法)实现方式

结果如图所示

vue3移动端适配(搭建app移动端适配的3种方法)实现方式

注意:“postcss-pxtorem”: “^5.0.0”,要安装指定版本否则会报错

第三种方式,后面单独设为一片文章

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址