精华内容
下载资源
问答
  • vant安装

    2021-03-11 14:19:22
    选择了官网的 npm i vant@next -S 命令 陈尼克建议的命令是 yarn add vant@3.0.0-beta.8 -S 也不知道哪个好,先这样了,官网安装的是3.0.9版

    选择了官网的

    npm i vant@next -S
    

    命令

    陈尼克建议的命令是

    yarn add vant@3.0.0-beta.8 -S
    

    也不知道哪个好,先这样了,官网安装的是3.0.9版

    展开全文
  • vant安装使用步骤简化说明 方式一,不使用插件的情况下,仅需三步: 安装vant: npm i vant -S 手动引入需要的组件(这里需要什么组件就引入什么): 在main.js 写入以下三条语句 import Button from ‘vant/lib/...

    vant安装使用步骤简化说明

    方式一,不使用插件的情况下,仅需三步:

    1. 安装vant: npm i vant -S

    2. 手动引入需要的组件(这里需要什么组件就引入什么):

      在main.js 写入以下三条语句

    	import Button from 'vant/lib/button';
    	import 'vant/lib/button/style';
        Vue.use(Button);
    
    1. 刚才引入的是button组件,现在使用,在页面上粘贴以下代码:

      <van-button type="default">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
      <van-button type="info">信息按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
      <van-button type="danger">危险按钮</van-button>
    

    方式二:使用插件,自动按需引入组件:

    1. 安装vant: npm i vant -S

    2. 安装babel-plugin-import插件:

    npm install babel-plugin-import --save-dev
    
    1. 在 babel.config.js 中配置(没有这步css样式就不能引用,把plugins数组复制粘贴就好了):

    // 注意,如果你的项目在运行,需要Ctrl + C终止,重新运行才会更新babel.config.js配置

     module.exports = {
        plugins: [
       ['import', {
         libraryName: 'vant',
         libraryDirectory: 'es',
         style: true
       }, 'vant']
        ]
      };
    

    我写出来的效果,你可以直接复制粘贴覆盖使用:

    module.exports = {
        presets: [
       '@vue/cli-plugin-babel/preset'
        ],
        plugins: [
       ['import', {
         libraryName: 'vant',
         libraryDirectory: 'es',
         style: true
       }, 'vant']
        ]
      }
    
    1. 在main.js中写入以下代码,同样是按需引入相应组件:

      import { Button } from 'vant';
      Vue.use(Button);
    
    1. 刚才引入的是button组件,现在使用,在页面上粘贴以下代码:

      <van-button type="default">默认按钮</van-button>
      <van-button type="primary">主要按钮</van-button>
      <van-button type="info">信息按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
    

    注意:如果需要使用rem单位,可自行安装postcss-pxtorem、lib-flexible插件,并在main.js中引入

    展开全文
  • Vant 安装使用

    2021-05-15 12:22:30
    1.首先,我们需要安装Vant,在现有的Vue2.0的项目中,可以通过npm安装 安装命令为 npm i vant -S npm i vant -S npm i 只下载文件,npm i -S 不仅下载文件,还会写入 package.json,以后 npm i的时候,会读取 ...

    Vant 是开源的移动端组件库,于 2017 年开源。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

    1.首先,我们需要安装Vant,在现有的Vue2.0的项目中,可以通过npm安装

    安装命令为 npm i vant -S

    npm i vant -S

     

    npm i 只下载文件,npm i -S 不仅下载文件,还会写入 package.json,以后 npm i 的时候,会读取 package.json 自动安装。

    2.安装完成后,可以选择在main.js中引入vant使用,这样是全局引入

    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    import Vant from "vant";//引入vant
    import "vant/lib/index.css";//引入vant的样式
    
    Vue.use(Vant);//使用vant
    
    Vue.config.productionTip = false;
    
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");
    

    当只需要其中几项时,可以按需引入,{}为解构赋值

    import Vue from "vue";
    import App from "./App.vue";
    import router from "./router";
    import store from "./store";
    
    import "vant/lib/index.css"; //引入vant的样式
    import { Button } from "vant"; //按需引入
    Vue.use(Button); //使用
    
    Vue.config.productionTip = false;
    
    new Vue({
      router,
      store,
      render: (h) => h(App),
    }).$mount("#app");
    

    3.引入成功后,复制vant官网按钮组件,可以看到样式如下

    接下来就可以采用最朴素的方式使用vant了

     

    展开全文
  • Vant 使用之Toast Vant安装和使用

    万次阅读 2019-10-10 16:44:25
    Vant 是一个VUE 的...第一步,安装和配置 Vant npm i vant -S npm i babel-plugin-import -D 安装完成之后,在项目.babelrc 文件修改配置plugins "plugins": [ ["import", { "libraryName": "vant", ...

    Vant 是一个VUE 的移动端组件库,里面有很多好用的组件。

    第一步,安装和配置 Vant

    npm i vant -S
    npm i babel-plugin-import -D

    安装完成之后,在项目 .babelrc 文件修改配置 plugins

    "plugins": [
        ["import", {
            "libraryName": "vant",
            "libraryDirectory": "es",
            "style": true
        }]
    ]

    到这里,Vant 算是安装配置完成了,下面开始使用它的组件

    第二步,使用 Vant 的 Toast 组件 官方文档链接

     

    先看一下页面中使用 Toast 的效果图,

    附赠一个简单的验证码倒计时实现代码(限于GIF大小限制,我传了5秒的倒计时,可自行修改)

    在 main.js 里面导入 Vant ,这里我只导入了 vant 的 Toast 组件

    import { Toast } from 'vant';
    Vue.use(Toast);

    最后在页面组件里面使用它,下面贴上页面组件的完整代码

    <template>
      <div id="ca">
        <div class="bindPhone">绑定手机</div>
        <div style="height: 6.375rem;"></div>
        <img class="xxx" @click="phone_val=''" v-if="this.phone_val" src="../../../static/images/xxx.png" />
        <input v-model='phone_val' class="phone_input" type="number" maxlength="11" placeholder="输入手机号" />
        <div class="code" @click="getCode">{{code}}</div>
        <input placeholder="输入验证码" />
        <button class="btn">下一步</button>
    
      </div>
    </template>
    
    <script>
      var that;
      export default {
        data() {
          return {
            msg: '',
            phone_val: '',
            code: '获取验证码'
          }
        },
    
        methods: {
          outTime(time) {
            setTimeout(function() {
              if (time == 0) {
                that.code = '获取验证码';
                return
              }
              time--
              var mm = time >= 10 ? time : '0' + time;
              that.code = '00:' + mm;
              that.outTime(time)
            }, 1000);
          },
          getCode() {
            console.log('点击获取验证码,手机号为:', this.phone_val);
            this.outTime(30);
            if (this.phone_val.length == 11) {
    
            } else {
              // this.toToast('手机号码不正确,请重新输入')
            }
          },
          toToast(txt) {
            this.$toast({
              message: txt,
              position: 'top'
            });
          }
        },
        mounted() {
          that = this;
          console.log('asas')
        }
      }
    </script>
    
    <style>
      .xxx {
        margin-top: 5px;
        position: absolute;
        right: 2.125rem;
        width: 0.9rem;
        height: 0.9rem;
        background: #808080;
        border-radius: 50%;
        padding: 0.25rem;
      }
    
      .code {
        position: absolute;
        width: 3.8rem;
        text-align: center;
        right: 2.125rem;
        background: #F2F2F2;
        color: #9E9E9E;
        padding: 8px 16px 8px 16px;
        margin-top: -6px;
        border-radius: 50px;
        font-size: 0.75rem;
      }
    
      #ca {
        background: white;
        height: 1000px;
      }
    
      .btn {
        outline: none;
        width: 80%;
        margin-left: 10%;
        margin-top: 7rem;
        height: 3rem;
        border: none;
        border-radius: 3.125rem;
        background: #F2F2F2;
        color: #9E9E9E;
      }
    
      input::-webkit-input-placeholder {
        color: #d0d0d0;
      }
    
      .bindPhone {
        margin-top: 2.2rem;
        margin-left: 2rem;
        font-size: 1.875rem;
      }
    
      input {
        outline: none;
        /* 修改input选中的默认边框样式 */
        caret-color: #7BEDD4;
        /* 修改input的选中时的光标颜色 */
        border: none;
        /* 修改input的选中时的默认边框 */
        font-size: 1.1rem;
        margin-left: 2rem;
        padding-bottom: 0.7rem;
        border-bottom: 2px solid #f3f3f3;
        width: 82%;
      }
    
      .phone_input {
        margin-bottom: 2.5rem;
      }
    </style>
    

     

    展开全文
  • vant安装配置

    千次阅读 2019-06-06 21:38:23
    今天使用到vant不曾想还有些坎坷,总结一下 一、安装 # 安装 1.x 稳定版本 ,推荐用稳定版本 npm i vant -S # 安装 2.0 测试版本 npm i vant@beta -S 二、引入组件 # 安装插件 ,babel-plugin-import 是一款 ...
  • Vant安装和使用

    万次阅读 多人点赞 2018-05-11 10:45:15
    Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于...
  • Vue移动端组件库vant安装和引入

    千次阅读 2020-03-26 19:34:35
    Vue移动端组件库vant安装和引入 特点:轻量、可靠的移动端 Vue 组件库 安装 在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目 # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue...
  • vant安装使用方法

    2020-11-04 21:55:34
    安装vant后,引入组件,才能使用。这里我选择自动按需引入组件,这也是官方推荐的一种引入方式。 babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。 安装插件 ...
  • vue vant 安装 使用详解

    千次阅读 2020-04-16 13:08:41
    Vant是轻量、可靠的移动端 Vue 组件库,安装使用可以参照官方文档进行,但是我发现文档不是很全面,所以自己在这里记录一下 vue使用Vant主要有四种方式,第四种通过CDN引入方式,这里不做介绍,主要是下面这三种: ...
  • 1、elementiui安装 使用npm安装:npm i element-ui -S 查看配置文件package.json文件是否有element-ui的版本信息 在main.js中引入: 当然也可以按需引入Element UI组件 安装babel-plugin-component: 然后,将....
  • 首先安装vant # Vue 2 项目,安装 Vant 2: npm i vant -S # Vue 3 项目,安装 Vant 3: npm i vant@next -S 安装 babel-plugin-import 插件 npm i babel-plugin-import -D 也可以通过图形化界面安装 2、配置...
  • 1.安装 ①直接下载/CDN https://unpkg.com/vue-router/dist/vue-router.js 在 Vue 后面加载 vue-router,它会自动安装的: <script src="/path/to/vue.js"></script> <script src="/path/to/vue-...
  • Vant安装和用法

    千次阅读 2020-05-15 18:46:15
    Vant安装和使用 Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50...
  • 1.vant安装 1.1 可以去vant官网看文档安装(https://youzan.github.io/vant/#/zh-CN/quickstart)) npm安装 npm i vant -S 1.2使用自动按需引入组件 (推荐) npm i babel-plugin-import -D 在 babel.config.js 中配置 ...
  • vant weapp安装

    2020-07-04 15:58:23
    1.在微信小程序的项目文件出右击打开终端 2.npm init -y 3.npm i @vant/weapp -S --production 4.详情勾选npm模块 5.工具=>构建npm
  • Vant UI 安装

    2018-03-06 17:24:00
    npm i vant -S 二、引入组件(共有三个方法)  方法一:使用babel-plugin-import(推荐)  1、安装 babel-plugin-import 插件 npm i babel-plugin-import -D 2、在 .babelrc 或 babel-loader 中添加插件...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,237
精华内容 494
关键字:

vant安装