江苏龙网

  1. 主页 > 生活百科 > >

开箱即用 vue全家桶+vant移动端解决方案( 二 )

vue全家桶+vant


// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = {  plugins: {    autoprefixer: {      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']    },    'postcss-pxtorem': {      rootValue: 37.5,      propList: ['*']    }  }}更多详细信息：vant
新手必看，老鸟跳过
很多小伙伴会问我，适配的问题 。
我们知道 1rem 等于html 根元素设定的 font-size 的 px 值 。Vant UI 设置 rootValue: 37.5,你可以看到在 iphone 6 下 看到 （1rem 等于 37.5px）：
<html data-dpr="1" style="font-size: 37.5px;"></html>切换不同的机型，根元素可能会有不同的font-size 。当你写 css px 样式时，会被程序换算成 rem 达到适配 。
因为我们用了 Vant 的组件，需要按照 rootValue: 37.5 来写样式 。
举个例子：设计给了你一张 750px * 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配 。

  • 当rootValue: 70 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑 满 。
  • 当rootValue: 37.5 的时候，样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕 。
也就是 iphone 6 下 375px 宽度写 CSS 。其他的你就可以根据你设计图，去写对应的样式就可以了 。
当然，想要撑满屏幕你可以使用 100%，这里只是举例说明 。
<img class="image" src=https://www.isolves.com/it/cxkf/bk/2020-08-04/"https://imgs.solui.cn/weapp/logo.png" />? VantUI 组件按需加载项目采 用 Vant 自动按需引入组件 (推荐) 下 面安装插件介绍：
babel-plugin-import 是一款 babel 插件，它会在编译过程中将import 的写法自动转换为按需引入的方式
安装插件npm i babel-plugin-import -D在babel.config.js 设置
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置const plugins = [  [    'import',    {      libraryName: 'vant',      libraryDirectory: 'es',      style: true    },    'vant'  ]]module.exports = {  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],  plugins}使用组件项目在 src/plugins/vant.js 下统一管理组件，用哪个引入哪个，无需在页面里重复引用
// 按需全局引入 vant组件import Vue from 'vue'import {Button, List, Cell, Tabbar, TabbarItem} from 'vant'Vue.use(Button)Vue.use(Cell)Vue.use(List)Vue.use(Tabbar).use(TabbarItem)? Sass 全局样式首先 你可能会遇到 node-sass 安装不成功，别放弃多试几次！！！
目录结构，在 src/assets/css/文件夹下包含了三个文件
├── assets│   ├── css│   │   ├── index.scss               # 全局通用样式│   │   ├── mixin.scss               # 全局mixin│   │   └── variables.scss           # 全局变量每个页面自己对应的样式都写在自己的 .vue 文件之中
<style lang="scss">  /* global styles */</style><style lang="scss" scoped>  /* local styles */</style>vue.config.js 配置注入 sass 的 mixin variables 到全局，不需要手动引入 ,配置$cdn通过变量形式引入 cdn 地址
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)const defaultSettings = require('./src/config/index.js')module.exports = {  css: {    extract: IS_PROD,    sourceMap: false,    loaderOptions: {      scss: {        // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn        // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders        prependData: `          @import "assets/css/mixin.scss";          @import "assets/css/variables.scss";          $cdn: "${defaultSettings.$cdn}";          `      }    }  }}


推荐阅读


上一篇：细思极恐的诡异经历 诡异的事情发生了

下一篇：标贝科技入选“2020人工智能语义识别创新排行”