Vue项目使用vant框架
近期在开发h5端项目,用到vant框架,vant是一款基于Vue的移动UI组件,看了vant的官方文档(https://youzan.github.io/vant/#/zh-CN/)感觉不错,功能比较齐全,可视化页面效果也不错,接下来与大家分享一下vant引入流程。
1、在项目里面安装 vant:npm install vant -S 也可简写为:npm i vant -S (接下来 install 将简写为 i )
安装完成之后就可以在 package.json 的依赖关系(dependencies)中看到 vant 及版本

2、接下来安装 babel-plugin-import ,这是一款babel插件,这样就可以按需引入功能了。
npm i babel-plugin-import -D

3、然后要在 .babelrc.js 中配置 plugins(插件)

cli3的配置如下:

4、然后按需引入 vant 组件,例如在 index.vue 中使用 Button 组件,就可以直接在 index.vue 中引入

5、如果多个页面组要用到同一个组件(Button),可以再 main.js 中引入

好了,大家可以试试效果怎么样哦!有疑问可以留言或评价,看到消息后我会及时回复的,希望可以帮到大家,谢谢!
Vue项目使用vant框架的更多相关文章
- vue项目使用Vant框架Rem适配(postcss-pxtorem、lib-flexible )的安装使用
1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引 ...
- vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法
滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到 ...
- vue项目使用vux框架配置教程
吐槽下,这个vux配置教程那..写的实在是坑,也不搞个示例代码...想上天吗???? 正常安装的话...100%报错...以下是正确配置 1.项目里安装vux npm install vux -- ...
- vue项目中vant tab改变标签颜色
找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e ...
- 解决未安装unit测试和jest的Vue项目运行karma start时的错误
一.起因 在#单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)文中,说明了是对已有的Vue项目进行测试框架的搭建,并进行测试.但是此项目在利用 vue-cli ...
- 分享我在 vue 项目中关于 api 请求的一些实现及项目框架
本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只是把 ...
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
- Vue项目框架
Vue项目框架 基本组件的使用: new Vue({ el, //要绑定的DOM element data, //要绑定的资料 props, //可用来接收父原件资料的属性 template, //要 ...
- Linux下Vue项目搭建karma测试框架
前提:vue项目已创建,node.js.npm已安装 1.全局安装karma脚手架 karma-cli [貌似可以不安装] #npm i -g karma-cli 2.转到Vue项目目录,项目下安装 ...
随机推荐
- pip 下载源更换
Python博大精深之处在于丰富的库,而目前最方便的下载库的方法无疑是pip.但是由于国内的网络环境导致,好多库下载是在太慢了,原因大家都懂得.. 一.临时修改 使用pip的时候加入参数 -i pip ...
- git 工作实用创建删除分支
一.创建分支 .创建本地分支并切换 git checkout -b dev_wt2 .创建切换并关联远程分支 git checkout -b dev_wt3 orgin/dev_wt3 .创建远程分支 ...
- 《ASP.NET Core 高性能系列》关于性能的闲聊
一.通常的性能问题类型 让我们一起看看那些公共的性能问题,看看他们是或者不是.我们将了解到为什么我们常常在开发期间会错过这些问题.我们也会看看当我们考虑性能时语言的选择.延迟.带宽.计算等因素. 二. ...
- shh登入不能自动执行.bashrc
在linux 上新安装的anconda来管理软件,把环境变量放在home目录的.bashrc.结果每次开终端,不能直接使用conda.需要手动加环境变量. 用户登入后计算机执行了哪些文件 用户登录时b ...
- 我的C++开发工具链
工欲善其事,必先利其器.想要干好活,顺手的工具是必不可少的.来分享下我的C++开发工具链. 平台:Windows 编译器:MSVC IDE:Visual Studio 版本控制:TortoiseGit ...
- Irrelevant Elements UVA-1635 (二项式定理)
vjudge链接 原题链接 乍一看似乎没什么思路,但是写几个简单的例子之后规律就变得很明显. 比如当 n=5 时,每一步计算后的结果如下: a1 a1+a2 a1+2a2+a3 a1+3a2+3a3+ ...
- 创建dynamics CRM client-side (六) - form & field notification
form 和 field 的notification在开发当中会经常使用到 // Converting functions to Namespace Notation var Sdk = window ...
- Apache Commons 相关工具类使用
Apache Commons Apache Commons包含了很多开源的工具,用于解决平时编程经常会遇到的问题,减少重复劳动.下面是我这几年做开发过程中自己用过的工具类做简单介绍. 组件 功能介绍 ...
- Servlet梳理
Servlet 梳理 概述 Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础. 要介绍 Servlet 必须要先把 Servlet 容器 ...
- Redis入门,Jedis和常用命令
一.Redis简介 1.关于关系型数据库和nosql数据库 关系型数据库是基于关系表的数据库,最终会将数据持久化到磁盘上,而nosql数据 库是基于特殊的结构,并将数据存储到内存的数据库.从性 ...