vant-ui的按需加载 babel-plugin-import 实现按需加载 “ babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式// 插件安装 yarn add babel-plugin-import -D 复制代码 // 在babel.config.js 中配置 module.exports = {pre…

vant-ui的按需加载

babel-plugin-import 实现按需加载

“ 

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

1 2 3

// 插件安装 yarn add babel-plugin-import -D 复制代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// 在babel.config.js 中配置 module.exports = {   presets: ["@vue/cli-plugin-babel/preset"],   plugins: [     [       "import",       {         libraryName: "vant",         libraryDirectory: "es",         style: true       }     ]   ] };   复制代码

使用vant组件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

// demo.vue <template>   <van-button type="info" :loading="loading">按钮</van-button> </template>   <script lang="ts">   import { Component, Vue } from "vue-property-decorator";   @Component({     name: "ButtonDemo",     components: {       [Button.name]: Button, // 组件使用     }   })   export default class extends Vue {} </script> 复制代码

移动端之rem的适配方式

postcss-pxtorem

“ 

postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// 安装插件 yarn add postcss-pxtorem -D   // 在postcss.config.js中进行配置 module.exports = {   plugins: {     autoprefixer: {},     "postcss-pxtorem": {       rootValue: 37.5,       propList: ["*"]     }   } }; 复制代码

1 2 3 4 5 6 7 8 9

// 在package.json中设置在什么情况下启用 PostCss {   "browserslist": [     "> 1%", // 全球超过1%人使用的浏览器     "last 2 versions" // 所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本   ] } // 复制代码

2020还自己手写css在个大浏览器的兼容版本难免有些low，这里的autoprefixer正好可以帮我们增加兼容版本。

rootValue根据UI图的大小进行设置，像vant、mint-ui这样的第三方UI框架是375，但是我们开发是一般使用的是750的尺寸，如果rootValue设置成75，会发现vant组件会偏小。所以设置成37.5,如果我们拿到了750的图那么实际尺寸需要 *2。其实我们如果使用蓝湖，可以直接设置一下@2。

amfe-flexible

“ 

amfe-flexible用于设置 rem 基准值,，你可能听过lib-flexible，打开官网发现已经废弃了，推荐使用的是amfe-flexible。

1 2 3 4 5 6 7 8 9

// 安装插件 yarn add amfe-flexible -D    // 在main.ts中使用 import "amfe-flexible/index.js";   // 更改index.js中的viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 复制代码

效果

“ 

注： postcss-pxtorem目前只支持外部样式表，也就是说内联样式不会被转成 rem

正常情况下我们可以发现webpack已经将 px转换成了相应的rem。

定义全局的统一sass变量

全局变量

“ 

定义好全局的变量方便统一规范css颜色，比如说：我们定义一个变量$bg为红色，后期想改变这个颜色就可以直接更改全局变量

目录结构

1 2 3 4 5 6

├─ src/              │   ├─ styles/     ├─── _variables.scss │   ├─── _variables.scss.d.ts │   ├─── index.scss 复制代码

_variables.scss

1 2 3 4 5 6 7 8 9 10 11 12 13

// Base color $bg:#324157;   // Sidebar $subMenuBg:#1f2d3d;   // Login page $loginBg: #2d3a4b;   :export {   subMenuBg: $subMenuBg; } 复制代码

variables.scss.d.ts

1 2 3 4 5 6 7 8

export interface IScssVariables {   menuBg: string; }   export const variables: IScssVariables;   export default variables; 复制代码

引入全局变量

“ 

直接在主入口文件main.ts里面引用是不生效的,这里需要使用style-resources-loader来帮助我们引入。

• style-resources-loader是什么呢？

“ 

style样式资源处理器，在style资源中注入内容，导入css / sass / scss / less / stylus这些内容。

• style-resources-loader有什么作用呢？

“ 

将预编译样式的变量、函数、mixin注入到全局，避免在每个样式文件中手动的@import导入

• 如何使用style-resources-loader？

  style-resources-loader是webpack的插件，所以需要我们自定义配置，vue-cli 3.0+隐藏了默认配置，并允许我们通过vue.config.js来修改配置。

  1 2 3 4 5 6 7 8 9 10 11 12 13

  module.exports = {   devServer: {}, // 端口号，构建完毕是否直接打开，反向代理等   pluginOptions: { // 这里使用style-resources-loader引入全局变量     "style-resources-loader": {       preProcessor: "scss",       patterns: [         path.resolve(__dirname, "src/styles/_variables.scss")       ]     }   },   chainWebpack(config){} // webpack的高级配置 }