以下以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

vant组件和element有什么区别_css

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

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: ‘’ 这两个参数不要忘了哦

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

运行结果

vant组件和element有什么区别_vue_02


样式呢?css呢?为什么没有显示上呢?console也没有报错~~(我不知道,我没吃,别找我)~~

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

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

App.vue 文件添加即可

vant组件和element有什么区别_Vue_03


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

vant组件和element有什么区别_vant组件和element有什么区别_04

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

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

局部引入

import Vant from 'vant';

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

效果有了啊,开发。。。开发完了又如何发布呢?

vant组件和element有什么区别_vue_05


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

vant组件和element有什么区别_Vue_06


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

vant组件和element有什么区别_vant组件和element有什么区别_07


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