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项目目录,项目下安装 ...
随机推荐
- .Net Core使用分布式缓存Redis:Lua脚本
一.前言 运行环境window,redis版本3.2.1.此处暂不对Lua进行详细讲解,只从Redis的方面讲解. 二.Redis的Lua脚本 在Redis的2.6版本推出了脚本功能,允许开发者使用L ...
- js复制变量值
来源:JavaScript高级程序设计(第3版)69页. 例如 : var a=1; var b = a ; 这里就是把a的值复制给变量 b 了. 但是 复制的变量值 分为 ...
- 切蛋糕(贪心 or 优先队列)
链接:https://www.nowcoder.com/acm/contest/80/D来源:牛客网 最可爱的applese生日啦,他准备了许多个质量不同的蛋糕,想请一些同学来参加他的派对为他庆生,为 ...
- 关于互信息(Mutual Information),我有些话要说
两个随机变量的独立性表示两个变量X与Y是否有关系(贝叶斯可证),但是关系的强弱(mutual dependence)是无法表示的,为此我们引入了互信息. 其中 p(x,y) 是 X 和 Y 的联合概率 ...
- urllib基本用法(了解)
一.urllib.urlopen 1.urlopen from urllib import request r = request.urlopen('http://www.baidu.com/') # ...
- git 其它补充(版本)
1.给源码贡献力量(当自己比较牛逼时) pull request 2..gitignore文件 在创建仓库的时候可以进行设置 3.版本 git tag -a v1.0 -m '版本介绍' 本地创建Ta ...
- 异数OS 2017 DPDK 峰会观后感
1.DPDK in Container 使用虚拟网卡设备技术为每一个容器分配一个IP 网卡适配器(queue).容器技术可以解决虚拟机技术中虚拟机过于臃肿,难于热迁移的问题,可能可以代替美团OVS方案 ...
- window和 linux 在一起 ios和 android在一起 net和js在一起
step 1: Windows 10 的 Linux Bash 支持「并不是使用虚拟机/模拟器」实现的,而是嵌入一个完整的 Ubuntu Linux 环境.技术上是实时将 Linux 的系统调用转换为 ...
- Web自动化测试项目搭建目录
Web自动化测试项目搭建(一) 需求与设计 Web自动化测试项目(二)BasePage实现 Web自动化测试项目(三)用例的组织与运行 Web自动化测试项目(四)测试报告 Web自动化测试项目(五)测 ...
- abp vnext2.0之核心组件模块加载系统源码解析与简单应用
abp vnext是abp官方在abp的基础之上构建的微服务架构,说实话,看完核心组件源码的时候,很兴奋,整个框架将组件化的细想运用的很好,真的超级解耦.老版整个框架依赖Castle的问题,vnext ...