博客

一、vant

1、引入与使用

• 直接通过 CDN 引入到html页面中

<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>

<script>
// 在 #app 标签下渲染一个按钮组件
new Vue({
  el: '#app',
  template: `<van-button>按钮</van-button>`
});

// 调用函数组件，弹出一个 Toast
vant.Toast('提示');
</script>

• 通过npm安装

npm i vant -S

1. 自动按需引入组件
   
   该方式需要安装babel-plugin-import插件，该插件会在编译过程中将 import 的写法自动转换为按需引入的方式

npm i babel-plugin-import -D

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

2. 手动按需引入组件

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

3. 导入所有组件

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

2、关于单位

Vant 中的样式默认使用px作为单位，如果需要使用rem单位，需要使用到两个工具：

• postcss-pxtorem：用于将单位转化为 rem
• lib-flexible ：用于设置 rem 基准值
  
  PostCSS基本 配置：

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

3、底部安全区适配

iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了safe-area-inset-bottom属性，设置该属性后，即可在对应的机型上开启适配。

<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">

<!-- 开启 safe-area-inset-bottom 属性 -->
<van-number-keyboard safe-area-inset-bottom />

官网链接地址：https://youzan.github.io/vant/#/zh-CN/home

二、elementUI

1、引入与使用

• 直接通过 CDN 引入到html页面中

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

• 通过npm安装

npm i element-ui -S

1、完整引入，在main.js文件中写入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

2、按需引入

• 借助babel-plugin-component
  
  安装babel-plugin-component：

npm install babel-plugin-component -D

//将 .babelrc 修改
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

//在main.js写入
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

• 按需引入

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

3、全局配置

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small', zIndex: 3000 });

官网链接地址：https://element.eleme.cn/#/zh-CN/component/installation

elementUI相对vant而言少了一些东西，例如：

1. elementUI的默认单位也是px，但它没有提供相应的方法将px转化成rem进行适配。
2. elementUI没有底部安全区适配等解决方式。
3. 相对vant而言，elementUI少了许多组件，例如：骨架屏、数字键盘、遮罩层、倒计时、滑动单元格等等。
   
   小编以为，vant在组件方面相对于elementUI而言更胜一筹。当小编看到这个UI框架时，心里只有一个念头，以后撸代码，不用自己写辣么多css来实现了，呜呜呜~~
   
   但对于UI框架而言，每个人都有每个人的习惯，每个公司有每个公司的要求规范，并不要求各位童鞋一点要使用小编推荐的，小编只是为各位童鞋介绍推荐有这么个东西~