精华内容
下载资源
问答
  • vue项目中使用vant插件

    千次阅读 2020-02-25 15:21:09
    下面使用vant插件的方法是官方推荐的一种方法,是自动按需引入的。如果您按照下面方法没能成功引入vant,您可以到官网去查看其它引入方法。vant官网 使用vue-cli脚手架创建项目, 使用 *npm install -g @vue/cli ...

    下面使用vant插件的方法是官方推荐的一种方法,是自动按需引入的。如果您按照下面方法没能成功引入vant,您可以到官网去查看其它引入方法。vant官网

    • 使用vue-cli脚手架创建项目,
      • 使用 *npm install -g @vue/cli 命令全局安装 Vue Cli 脚手架
      • 创建项目,使用 vue create myAppName 创建项目
        目录结构
    • 在项目的根目录下,使用 npm i vant -S 命令安装vant
    • 在项目的根目录下,使用 npm i babel-plugin-import -D 命令安装babel 插件。它会在编译过程中将 import 的写法自动转换为按需引入的方式
    • 配置 babel.config.js 文件

    babel.config.js

    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ]
    }
    
    
    • 使用vant组件

    src/app.vue

    <template>
    <div id="app">
     <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>
    </div>
    </template>
    
    <script>
    import { Button } from 'vant';
    export default {
      components: {
        [Button.name]: Button
      }
    }
    </script>
    
    <style >
    #app{
      width: 100%;
      height: 100%; 
    }
    </style>
    
    

    运行vue项目,您就可以看到vant插件的Button组件了
    Button插件效果展示
    vant其它的组件同理也是这样引入使用就可以了。
    官方推荐这种是因为不需要再引入相对应组件的样式,也不需要把整个vant插件导入项目中来。此方法可按照项目中引入的vant组件,自动引入对应组件的样式,相对其它方法来说提高了项目的编译性能

    展开全文
  • 1.通过 npm 安装 # Vue 2 项目,安装 Vant 2: npm i vant -...# 安装插件 npm i babel-plugin-import -D 在.babelrc 或 babel.config.js 中添加配置: { "plugins": [ [ "import", { "libraryName": "vant",

    1.通过 npm 安装

    # Vue 2 项目,安装 Vant 2: npm i vant -S

    # Vue 3 项目,安装 Vant 3: npm i vant@next -S

    2.按需引入组件

    # 安装插件

    npm i babel-plugin-import -D

    在.babelrc 或 babel.config.js 中添加配置:

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

    3.在代码中直接引入 Vant 组件,插件会自动将代码转化为按需引入的形式。

    例如:引入button按钮

    import { Button } from 'vant';

    vue.use(Button)

    展开全文
  • mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。 此教程是在dov-yih一同协助下完成。经过测试,Vant ...
  • vant框架的使用

    2021-10-15 11:58:10
    4.引入需要的标签,若只有一处使用,则在需要的页面引入,若多处使用,在main.js引入 运行结果 2.2、方式二:手动按需引入组件 2.3、方式三:导入所有组件 Vant 支持一次性导入所有组件,引入所有组件会增加代码...

    我的有道云笔记

    一、通过脚手架安装vant

    在这里插入图片描述

    二、引入vant

    2.1、方式一:按需引入(推荐)

    步骤

    • 1.安装vant
      在这里插入图片描述

    • 2.下载插件
      在这里插入图片描述
      在这里插入图片描述

    • 3.在 babel.config.js 中配置
      在这里插入图片描述

    • 4.引入需要的标签,若只有一处使用,则在需要的页面引入,若多处使用,在main.js引入
      在这里插入图片描述
      运行结果
      在这里插入图片描述

    2.2、方式二:手动按需引入组件

    2.3、方式三:导入所有组件

    Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法。
    步骤

    • 1.安装vant框架

    • 2.main.js全局引入
      在这里插入图片描述

    • 3.然后再页面上使用‘
      在这里插入图片描述

    运行结果在这里插入图片描述

    三、浏览器适配

    步骤

    • 1.在当前项目安装postcss-px-to-viewport插件
      在这里插入图片描述
      在这里插入图片描述
    • 2.在当前项目创建postcss.config.js并放如下代码
      在这里插入图片描述
    module.exports = {
      plugins: {
        'postcss-px-to-viewport': {
          viewportWidth: 375,
        },
      }
    };
    
    • 3.设置自己想要的样式(这里我是为了占屏幕一半)
      在这里插入图片描述
      运行结果
      在这里插入图片描述
    展开全文
  • vant使用方法

    千次阅读 2019-10-18 14:13:42
    以时间插件为例子: template的代码: <van-datetime-picker v-model="currentDate" type="date" @confirm="confirmDate" @change="changeDate" @cancel="cancelDa...

    以时间插件为例子:
    template的代码:

            <van-datetime-picker
              v-model="currentDate"
              type="date"
              @confirm="confirmDate"
              @change="changeDate"
              @cancel="cancelDate"
            />
    

    js代码:

      methods: {
        confirmDate(data){
          console.log(data);
        },
        cancelDate(){
    
        },
        changeDate(picker){
          console.log('pick',picker.getValues());
        }
      }
    

    介绍:
    在这里插入图片描述
    Events的事件处理,是需要在html里使用@来触发的。

    change事件的事件处理,是通过change绑定一个函数,然后函数传一个picker的参数,然后所有封装的函数都是这个picker的一个对象方法,可以根据自己的应用选择方法。

    展开全文
  • Vant安装和使用

    万次阅读 多人点赞 2018-05-11 10:45:15
    Vant ( ˈvænt ) 是有赞前端...目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城,用 Vant 就再合适不过了。中文文档链接:https://www.youzanyun.com/zanui/vant#/...
  • Vant入门及使用

    千次阅读 2020-04-24 11:45:40
    vant 轻量,可靠的移动端Vue组件库...在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目 一:安装 npm install -g @vue/cli ***通过 npm 安装在现有项目中使用 Vant 时,可以通过npm或yarn安...
  • Hi,很高兴认识你~世界很大,巧妙的是我们在这里相遇。...当使用Refresh插件时,如果存在当van-refresh组件的父级overfow-y:scorll 的样式时,选中的滚动条为父级元素,此时当body内部容器撑开页面元素时
  • 3.安装vant依赖包(在终端输入) npm i vant-weapp -S --production 4.进入小程序开发工具,选择左上角 工具->构建npm 完成之后项目里会多出依赖包 5.点击右上角详情并勾选使用npm模块。 6.选择要在哪个pages...
  • vue脚手架中使用vantui

    2021-08-27 09:35:47
    1.下载安装vant-ui ...# 安装插件 npm i babel-plugin-import -D // 可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true
  • vant组件库的基本使用
  • 在项目中使用vant的Area插件,需要进行全部匹配,vant本身没有实现,需要改造代码,方法如下:起点终点vue的methos中添加下面两个方法:change(picker, value, index){if(value[0].code != 100000){if(index == 0)...
  • 使用Vant流程

    2021-06-04 17:41:18
    1.下载安装Vant npm i vant 或 npm install vant --save
  • 1、创建vue项目2、使用vant组件npm install vant --S全局引用时在...假如你引入之后发现页面的样式和组件都挂载了,但是console控制台会报错,说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题,重...
  • 那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图:着实让员外百思不其解,在调用vant 的 Image...
  • 点击右上方红色按钮关注“web秀”,让你真正秀起来前言表单校验,在开发中是非常常见的,为了防止...Vue表单校验插件Vuerify使用详细教程及示例什么是Vuerify?Vuerify 是一款轻量级的数据校验 Vue 插件,同时支持...
  • 这里记录下使用最新的Vite+vue3和有赞出品的Vant移动端UI库搭建移动端应用的过程。 Vite官网地址:https://vitejs.dev/ 使用Vite的优点:最简单直观的一点,那就是快啊。 和Webpack相比,Vite 具有以下特点:...
  • vant的安装和使用步骤

    2021-05-18 20:57:51
    vant的安装和使用步骤 这里以当前的最新版本为例 完成安装之后,就可以根据需要使用了,此处以官网为例,下载babel-plugin-import 1.安装插件 npm i babel-plugin-import -D 或者直接在ui里面找到并安装 2....
  • Vant的安装和用法

    千次阅读 2020-05-15 18:46:15
    Vant安装和使用 Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50...
  • 之前找了不少如何开发谷歌插件的文章,结果发现都是些很基础的内容,并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢?如果通过webpack编译的话,就能使开发过程变得更舒服,使文件结构...
  • 本文由图雀社区认证作者曾伟@喵先森写作而成,图雀社区将连载其使用原生开发高仿瑞幸小程序系列,点击阅读原文查看作者的 infoQ 链接,感谢作者的优质输出,让我们的技术世界变得更加美...
  • Vite+Vant移动端项目快速搭建_MQ 一、项目的创建 1、使用命令快速创建Vite项目 npm create @vitejs/app npm create @vitejs/app 2、填写项目名称并选择项目框架以及项目开发脚本支持(这里全都选择vue) 此时...
  • 如何使用Vue集成其它UI组件前言一、Vant是什么?二、基础环境准备1.1 了解是根本1.2 安装1.3 引入组件3.1 步骤一3.2 步骤二3.3 步骤三二、事件绑定2.1 引入2.2 编写页面代码2.3 通用Events事件三、参数传递总结 ...
  • 话不多说,请先看效果。 思路: 把van-dialog的背景色设置为空,background-color:transparent。 把img的宽高设置为100%即可。...van-dialog v-model="show" confirmButtonColor="#07c160" :showConfirmButton=...
  • bilibili发布页面主要有:发布按钮、多行文本框、一个上传图片的按钮(此处使用vant插件) 组件里面的头部有:左返回按钮(使用vant)、发布按钮 <div class="top"> <van-icon name="arrow-left" class...
  • uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 特点 学习成本低,如果学习过vue.js和微信小...
  • Vant 官方文档链接 Element UI 是饿了么前端团队推出的基于Vue的左面端UI框架,和Bootstrap一样对原生的HTML标签进行了封装,进行了美化,让我们能够专注于业务逻辑而不是UI界面。 基础使用 在Vue-CLI的项目...
  • 最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型商城项目源码来练练手,目前处于开发阶段,过程中用到了 Vant3.0,于是就整理了这篇文章来讲一下如何...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 582
精华内容 232
关键字:

vant插件使用教程

友情链接: hao.zip