5.1如何引入vant、引入axios内容、移动端适配（rem）、媒体查询

前面的4.1写了怎么引入所有的vant组件，现在写vant的其他两种引入方法

按需导入

想要按需导入先看之前有没有一次性导入过vant的所有组件，如果有记得删掉

一、手动按需引入组件

首先在App.vue中引入
import Button from ‘vant/lib/button’;
import ‘vant/lib/button/style’;

按需导入的好处就是我们这个文件体积不会很多

二、自动按需引入组件

好处是： 不用自己去拼接路径和样式

1.安装插件

代码是：

npm i babel-plugin-import -D

2.在babel.config.js 中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为手动按需引入中的按需引入形式

以button为例演示

然后新建终端，运行npm run serve就可以在网页上看到效果了

但是这样就会在main.js中有太多vant的引入，所以我们在src文件夹里新建一个专门用来放工具的utils文件夹，里面再新建一个vant.js文件，专门用来放从vant引入的组件。

然后我们在main.js中导入vant文件夹就可以了

axios

1.下载axios

2.引入axios

import axios from 'axios';

移动端适配的解决方案

关于rem单位

rem是根据一个html字体大小为单位 比如我们设置了一个html字体大小为16px 那么1rem就是16px 2rem就是32px 以此类推

如果 我们设置一个html字体大小是10px 那么1rem就为10px 2rem就为20px

演示

媒体查询

媒体查询会根据不同的屏幕尺寸来设置不同的样式。

语法：
@media mediatype and/not/only (media feature) {css-code]

@media 开通媒体查询
mediatype 媒体类型: all-用于所有设备；print-打印机和打印预览;scree-电脑、手机、平板and/not/only: and-多个媒体连接到一起，且; not-排除某个媒体，非; only-指定某个媒体，可省略。
(media feature) 媒体特性，必须有小括号包含。

/*min-width: 定义输出设备中页面最小区间区域宽度
width: 定义输出设备中页面可见区域的宽度
max-width: 定义输出设备中页面最大可见区域宽度 */

示例


但是这样也很不方便，每个不同尺寸都要写，所以我们用flexible插件来满足适配问题。