Vant轻量UI库使用流程

官网地址

https://youzan.github.io/vant/#/zh-CN/intro

安装Vant

npm install --save vant

安装插件 babel-plugin-import

按需导入
有全部组件导入，有按需导入。更多推荐是按需导入，因为组件库中并不是所有组件都是需要使用的。

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

npm i babel-plugin-import -D

# vue/cli-3
# 在 babel.config.js 

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [    # 添加的内容
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

使用

<template>
    <div class="navbar">
        # 组件使用
        <van-nav-bar
          :title="title"
        />
    </div>
</template>

<script>
    # 导入需要使用的组件
    import { NavBar } from 'vant';
    
    export default{
        name: 'navBar',
        components:{    # 组件声明
            [NavBar.name]:NavBar
        },
        data() {
            return {
                title: '全视眼镜商城'
            }
        },
    }
</script>

<style>
# 样式定制
.van-nav-bar{
    background: red;
}
.van-nav-bar__title{
    color: white;
}
</style>