uniapp 引入vantUI

1:安装Vant组件库

npm i vant -S（cnpm i vant -S）

2:安装官方给出的引入方式引入组件，一般我都是引入所有组件，在main.js里面添加

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';Vue.use(Vant);

运行后会出现下图这种错误

这是HBuild X的buy已经过了很多个版本都没有修复，出现这个是因为在main.js中引入vant样式import 'vant/lib/index.css’时出现了错误

3:建立一个html的模板文件，我命名为template.h5.html(位置和pages平级)

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css"><title><%= htmlWebpackPlugin.options.title %></title><script type="text/javascript" src="./static/config.js"></script><script>document.addEventListener('DOMContentLoaded', function() {document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'})</script><link rel="stylesheet" href="<%= BASE_URL %>static/index.css" /></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

4:在manifest.json的H5配置中将其作为index.html模板导入

如果还是报错了的话，将import 'vant/lib/index.css’改为import 'vant/lib/index.less’试试

uniapp 引入vantUI相关推荐

引入Vant-UI全部组件的代码 - （备份）
引入Vant-UI全部组件的代码(备份) 代码罗列: import { Actionsheet,AddressEdit,AddressList,Area,Badge,BadgeGroup,Button ...
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
uni-app引入海康威视h5player实现视频监控的播放
uni-app引入海康威视h5player实现视频监控的播放知识储备工具下载 webplayer.html h5player.vue 视频时效传递参数为中文 webview 返回上一页在H5环 ...
uniapp引入阿里图标
uniapp引入阿里图标: uniapp引入自定义阿里图标库后在手机端不显示图标跟着我做: 第一步: 第二步: 第三步: 是的,你没看错,这样操作不太行,确实没有图标s #学习时间(正确): 第一步 ...
【uniapp引入阿里字体图标】
uniapp引入阿里字体图标引入阿里字体图标引入阿里字体图标链接奉上 uni-app字体图标阿里图标官网 nvue中不可直接使用 css 的方式引入字体文件,需要使用以下方式在 js 内引入. ...
uni-app引入阿里矢量图在移动端不显示的问题
1.uni-app引入字体图标是不支持本地的, 所以在调用的时候直接复制阿里的在线图标粘贴到vue.app下的style下: 请求头!!!一定要加
uniapp引入vantweapp踩坑笔记
vue-cli创建uniapp项目引入vantweapp踩坑笔记 uni-app中引入vantweapp vue-cli创建uniapp项目引入vantweapp踩坑笔记一.环境准备二.项目搭建 ...
uniapp 引入vant 2 报错 require is not defined
uniapp 引入vant 2 报错 require is not defined 一.Vue 2 项目,安装 Vant 2 npm i vant@latest-v2 二.main.js 导入Vant ...
uniapp引入uview 后sass-loader报错解决
uniapp引入uview 后sass-loader报错解决错误是这样的 Module build failed (from ./node_modules/sass-loader/dist/cjs. ...

uniapp 引入vantUI

uniapp 引入vantUI相关推荐

最新文章

热门文章