介绍
Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本。
移动端适配
首先vant组件库并没有做移动端的适配，样式默认使用 px 作为单位，这样会在不同的移动设备下展现出不一样的效果，vant给推荐了两种方案Viewport 布局，Rem 布局适配，本人更倾向于第二种方案
如果需要使用 rem 单位进行适配，推荐使用以下两个工具：
- postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
- lib-flexible 用于设置 rem 基准值
yard add amfe-flexible /npm i amfe-flexible //在main.js 引入 import 'amfe-flexible'
yard add postcss-pxtorem -D /npm i postcss-pxtorem -D
rem详解
1rem等于html根元素设定的font-size的px值，vantui设置rootValue： 37.5，则1rem 等于 37.5px 等于 设备的宽度/10
切换不同的机型， 根元素有不同的font-size， 当写css px样式时， 会被程序换算成rem达到适配 使用vant组件，需要按照rootValue：37.5来写样式
PostCSS
是一个用 JavaScript 工具和插件转换 CSS 代码的工具，postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，类似于webpack，autoprefixer 就是其一,还有postcss-pxtorem，postcss-cssnext等。可以去它的官网了解更多插件的使用。
Vue CLI 内部使用了 PostCSS。
你可以通过 .postcssrc 或任何 postcss-load-config 支持的配置源来配置 PostCSS。也可以通过 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。vue教授叫为我们默认开启了 autoprefixer。如果要配置目标浏览器，可使用 package.json 的 browserslist 字段。
在项目根路径创建postcss.config.js。vant是按照375pt（逻辑像素）规范开发，现在主流设计稿一般为750（物理像素）iphone6/7/8，这里涉及到了移动端物理像素和逻辑像素的概念，这里就不展开赘述了，如果配置根字体大小为37.5，设计稿就无法还原，如果配置75，设计稿就可以测量多少写多少，但是vant组件就变小了，查询文档发现 rootValue 支持两种类型 一种数字 一种函数数： 可以动态处理返回值 postcss-pxtorem 处理每个 css 文件都会来调用这个函数，如果是Vant的样式就按照 37.5 转换 如果是自己的就用 75转换。
我在项目里设置的基准值为37.5，设计稿改变单位为pt，这样能达到同样的效果。
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {r'r'r'r'r'r'r'r'r'r'r'r'r'r'r'r'r'r'r
return file.indexOf('vant') !== -1 ? 37.5 : 75;// 判断条件 请自行调整
},
propList: ['*'],//指定转换rem的属性
},
},
};
开发规范(vant官方建议的规范，pc和移动端开发都应该遵循该规范)
1.组件的 data 必须是一个函数。
export default {
data() {
return {
foo: 'bar',
};
},
};
2.单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)
// bad
mycomponent.vue
myComponent.vue
// good
my-component.vue
MyComponent.vue
3.和父组件紧密耦合的子组件应该以父组件名作为前缀命名,
// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue
// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue
4.在单文件组件中没有内容的组件应该是自闭合的。
<!-- bad -->
<my-component></my-component>
<!-- good -->
<my-component />
5.在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case。
// bad
export default {
props: {
'greeting-text': String,
},
};
// good
export default {
props: {
greetingText: String,
},
};
!-- bad -->
<welcome-message greetingText="hi" />
<!-- good -->
<welcome-message greeting-text="hi" />
6.标签的 Props 应该有统一的顺序，依次为指令、属性和事件。
<my-component
v-if="if"
v-show="show"
v-model="value"
ref="ref"
:key="key"
:text="text"
@input="onInput"
@change="onChange"
/>
7.组件选项应该有统一的顺序。
export default {
name: '',
mixins: [],
components: {},
props: {},
data() {},
computed: {},
watch: {},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
8.组件选项较多时，建议在属性之间添加空行。
export default {
computed: {
formattedValue() {
// ...
},
styles() {
// ...
},
},
methods: {
onInput() {
// ...
},
onChange() {
// ...
},
},
};
9.单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。
<template>
...
</template>
<script>
/* ... */
</script>
<style>
/* ... */
</style>
