第一章 Vant的引入和基本使用

Vant UI組件庫基本使用

一、Vant官網

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

二、安裝Vant

npm install --save vant

三、安裝插件 babel-plugin-import

npm i babel-plugin-import -D

.babelrc中更改添加

{
  "presets": ["es2015", "stage-3"],
  "plugins": ["transform-runtime",
    ["import", {
      "libraryName": 'vant',

      "style": true
    }, 'vant']
    ],
  "comments": false
}　　

模板　

<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>　　

　

atzhang: 說明: 引入方式為

import { NavBar } from 'vant';  [元件.name]:元件

        components: {
            [NavBar.name]: NavBar,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Button.name]:Button,
            [Field.name]:Field,
            [Form.name]:Form,
            [Notify.name]:Notify,
            [Collapse.name]:Collapse,
            [CollapseItem.name]:CollapseItem,
            [List.name]:List,
            [Col.name]:Col,
            [Row.name]:Row,
            [Empty.name]:Empty,
        },

參考文檔:http://bluezyz.com/index.php/archives/214/