vue-cli项目下引入vant组件
前言
Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城,用 Vant 就再合适不过了。
vant地址:https://youzan.github.io/vant/#/zh-CN/intro
本章目标
在vue-cli的项目中使用vant的相关组件
项目构建
如果您还没有搭建vue-cli项目,那么请参考https://www.cnblogs.com/jjgw/p/11334797.html这篇博客,搭建好的vue-cli项目结构如下:
1.接下来我们在控制台输入安装vant的命令
npm i vant -S
:这是简写形式。
npm install vant --save
:这是完整写法。
2.安装完成之后的结果
3.如果您不确定是否安装成功,那么我们可以去node_modules中查看
4.接下来我们还需要安装一个插件,方便我们之后优雅的使用vant,在控制台输入npm i babel-plugin-import -D 或者 npm install babel-plugin-import --save-dev
5.接下来我们去.babelrc中配置一下
babelrc代码:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}]],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
6.使用vant,我们在src/components下新建一个VantComponent组件,代码如下:
<template>
<div>
<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 {
name: 'VantComponent',
//注册组件
components:{
[Button.name]: Button
}
}
</script> <style scoped> </style>
7.去src/router/index.js设置路由地址
import Vue from 'vue'
import Router from 'vue-router'
import VantCom from '@/components/VantComponent'
Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'VantCom',
component: VantCom,
}
]
})
8.运行结果:
9.如果出现了结果的话,那么恭喜你vant中的组件你可以为所以为的使用了,好了本篇关于vant的使用就到此为止,有什么任何的问题都可以在下方评论.
总结
vue-cli对vant的使用并不难,很多移动端的项目都可以使用一些vue扩展的组件,例如像vant用来做商城类的项目最合适不过了,当然比较出名的还有vux,这一个组件可以说是比较的坑,组件有很多特别坑人的地方,附加地址vux:https://vux.li/。
vue-cli项目下引入vant组件的更多相关文章
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- 微信小程序引入Vant组件库
前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.j ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- vue 构建项目 文件引入
1.vue引用依赖文件. 举例:axios 先安装 axios.如果直接安装 vue-axios 会报错 npm install axios npm install --save axios vue ...
- 如何在vue项目中引入elementUI组件
个人博客同步文章 https://mr-houzi.com/2018/02/... 前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一 ...
- vue项目中引入vant 使用rem布局问题
postcss.config.js const autoprefixer = require('autoprefixer') const pxtorem = require('postcss-pxto ...
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue中项目如何引入sass (vue-cli项目)
1.进入项目目录 2.安装sass的依赖 npm install --save-dev sass-loader npm install --save-dev node-sass 3.在build文件夹 ...
- vue/cli项目添加外部js文件的一个方法
有一个util.js文件,内容如下 function Util () { ... } export default new Util() 可以在main.js里面通过import引入js import ...
随机推荐
- HDU 2795:Billboard(线段树)
http://acm.hdu.edu.cn/showproblem.php?pid=2795 Billboard Problem Description At the entrance to th ...
- linuxprobe培训第2节课笔记2019年7月6日
使用VM虚拟机配置RHEL实验环境. 鉴于在笔记本上装过centos7,这章内容难度对我来说不是很大. 重置root管理员密码(RHCSA考题,第一题,做不出来无法进行下一步考试) e linux16 ...
- Java学习笔记之---基础语法
Java学习笔记之---基础语法 一. Java中的命名规范 (一)包名 由多个单词组成时,所有字母小写(例如:onetwo) (二)类名和接口 由多个单词组成时,所有单词首字母大写(例如:OneTw ...
- python通过TimedRotatingFileHandler按时间切割日志
通过TimedRotatingFileHandler按时间切割日志 线上跑了一个定时脚本,每天生成的日志文件都写在了一个文件中.但是日志信息不可能输出到单一的一个文件中. 原因有二:1.日志文件越来越 ...
- 为使用mock方案测试,而重构代码的小小案例
import com.sun.deploy.config.DefaultConfig; import javax.security.auth.login.Configuration; import j ...
- [原创]wireshark&xterm安装、配置和使用
--wireshark && xterm--一.安装wireshark: #apt-get install wireshark二.启动wireshark: #wireshark 或者 ...
- STM32-I2C_CheckEvent-标志位自动清除理解
STM32里I2C_CheckEvent函数我们应该是相当熟悉了,在每次发送数据后我们都需要检验相应的EVx(x = 0,1,2,,,)事件是否有发送. 函数定义如下: ErrorStatus I2C ...
- Appium+python自动化(二十二)- 三个臭皮匠顶个诸葛亮-控件坐标获取(超详解)
简介 有些小伙伴或者是童鞋可能会好奇会问上一篇中的那个monkey脚本里的坐标点是如何获取的,不是自己随便蒙的猜的,或者是自己用目光或者是尺子量出来的吧,答案当然是:NO.获取控件坐标点的方式这里宏哥 ...
- [剑指offer] 6. 旋转数组的最小数字
题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...
- Django的学习进阶(三)————ORM
django框架是将数据库信息进行了封装,采取了 类——>数据表 对象——>记录 属性——>字段 通过这种一一对应方式完成了orm的基本映射官方文档:https://docs.dja ...