vant组件和element有什么区别

以下以vant为例，发布H5

轻量、可靠的移动端 Vue 组件库，采用 MIT 开源协议, 目前github star 数9k+，是有赞的一套开源组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近 60+ 个组件，这些组件被广泛使用于有赞的各个移动端业务中 此段搬的官网语句

#如何引入呢？
一：官方推荐了几种方法 ，具体写法就不复述了 引入方法 本人用的是 npm 方式

# Vue 2 项目，安装 Vant 2：
	npm i vant -S
	 Vue 3 项目，安装 Vant 3：
	npm i vant@next -S

上面这不是重点，上述只是为了下载文件，但要怎么用呢？
当然是全局引用

main.js ：

import Vant from 'vant';
Vue.use(Vant);

这只是引用了vant的组件模块！！！

不信啊？那就试试呗

找一个页面写入

<van-cell-group>
			<van-field v-model="username" required clearable label="用户名" icon="question-o" placeholder="请输入用户名"
				bind:click-icon="onClickIcon" />

			<van-field v-model="password" type="password" label="密码" placeholder="请输入密码" :border="false" required />
		</van-cell-group>

username: ‘’,password: ‘’ 这两个参数不要忘了哦

运行：–运行至内置浏览器或者小程序…

运行结果：

样式呢？css呢？为什么没有显示上呢？console也没有报错~~（我不知道，我没吃，别找我）~~

发生上述原因：没有引入css :vant的组件和css单独维护的，所以需要手动引入

@import 'vant/lib/index.css'; // 需要放在 <style></style>标签里面

App.vue 文件添加即可

亲测只有这种方式才有样式

uni.css 引入按道理说应该是可以的，但试了发现不行哦，应该是我没找到方法吧，

当然以上的vant引入是全局引入

局部引入：

import Vant from 'vant';

@import 'vant/lib/index.css'; // 需要放在 <style></style>标签里面

效果有了啊，开发。。。开发完了又如何发布呢？

然后嘛，按照步骤走就可以了，在编译打包完成后会得到一个打包文件

把h5下面的文件拷贝到服务器即可至于colorUI，uview 这类第三方UI框架在项目新建的时候选择即可，

至于用法嘛，，比vant似乎更简单一点咯，官网提示都挺全得