vant基础入门按钮样式展示

对于新人官方文档坑太多，写的太囵囤，新手入门还是比较高。

1.说一下半天研究的成果

1. main.js配置为全局，配置后在任意组件中都可以使用
2. 需要添加样式的，官方文档没有，一顿调试，显示按钮不显示样式
   Hello.vue代码
   下面代码：

<template>
    <div>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="default">默认按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button><br />
        <van-button loading type="primary" /> &nbsp;
        <van-button loading type="primary" loading-type="spinner" /> &nbsp;
        <van-button loading type="info" loading-text="加载中..." />
    </div>
</template>

<script>
    import Vue from 'vue' ;
   import 'vant/lib/index.css';
    import {Button} from 'vant';
    Vue.use(Button);
    export default {
        name: "hello"
    }
</script>

3. app.vue引入
   

运行后：

推荐使用vs或者webStorm开发工具，省事不少,

最后

以上就是个性白猫为你收集整理的vant基础入门按钮样式展示的全部内容，希望文章能够帮你解决vant基础入门按钮样式展示所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。