您的位置：首页 > 移动开发

uni-app引入vant组件 H5

2020-02-06 06:36 543 查看

1.uni-app官方关于vant组件的基本都是针对小程序和app开发的Vant Weapp，找了很多方法后终于找到一篇
针对H5的vant组件使用方法

2.首先建立一个uni-app新项目

2.在终端打开项目目录，可以直接在HBuilder X中直接选择

使用命令行打开目录
，如果没有安装插件，会提示【内置终端未安装】，选择安装内置终端，

之后便可以打开对应的项目目录

3.初始化项目创建package.json，在终端执行

npm init

之后会让你填一些项目名称、版本号之类的项目介绍，如果不知道或者不想填就可以一路回车

4.安装Vant组件库
打开vant的官方文档，快速上手中有通过npm安装的vant指令，在终端执行就可以
vant官方文档：

https://youzan.github.io/vant/#/zh-CN/

npm i vant -S


里面的几个警告不用管

5.安装官方给出的引入方式引入组件，一般我都是引入所有组件，在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'
时出现了错误

6.建立一个html的模板文件，我命名为model.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>
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>

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

之后保存后发现错误没有了，但是现在用vant组件会发现还是没有样式

8.在对应的页面引入vant样式，使用Vnat组件的页面中样式已经出现了，但是又部分的样式会不准确

@import 'vant/lib/index.css'

9.安装Vue官方提供的脚手架 Vue Cli 3
右击项目名称选择

使用命令行窗口打开目录执行

npm install -g @vue/cli

之后便可以获得正确的样式了

原作者地址：

https://www.cnblogs.com/suvvm/p/11336954.html

  • 点赞
  • 收藏
  • 分享
  • 文章举报
Z安迷修 发布了24 篇原创文章 · 获赞 1 · 访问量 987 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航