uni-app 引入**vant，colorUI,uView等并发布H5端_vant uview区别-程序员宅基地

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

可以看见有多了一个node_modeules文件夹，这里面就是vant的相关文件了

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

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>标签里面

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

发行-网站-pc.web或手机H5
然后嘛，按照步骤走就可以了，在编译打包完成后会得到一个打包文件
在这里插入图片描述
把h5下面的文件拷贝到服务器即可

至于colorUI，uview 这类第三方UI框架在项目新建的时候选择即可，
在这里插入图片描述
至于用法嘛，，比vant似乎更简单一点咯，官网提示都挺全得
若是有问题可以私我哦

注：好久没写博客了，，手法生疏，抱歉请见谅

本文链接：https://blog.csdn.net/Cat_Friends_Dog/article/details/116459160

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

多线程基础之设计模式Future模式_线程 future-程序员宅基地

文章浏览阅读258次。多线程基础之设计模式Future模式_线程 future

CCS中关于error#5、error#10008-D、error#16001的更正指导_cannot find file "libc.a-程序员宅基地

文章浏览阅读1w次，点赞17次，收藏60次。本文档仅对ccs编程过程中所出现的error#5、error#10008-D、error#10010做简要讲解在使用ccs对dsp编程过程中，用户可能会参考一些例程或在维护优化时阅读他人程序，而在导入程序时会出现各种各样的错误或警告，下面对编者在修改程序时遇到的error#5、error#10008-D和error#10010做简要讲解。1.error#5的错误更正讲解在ccs中导入其..._cannot find file "libc.a

poj 3080（3450） KMP（暴力也能过）多个串的最长公共子串-程序员宅基地

文章浏览阅读359次。题意：给定m(m思路：暴力找出第一个串的所有长度大于等于3的子串，用KMP算法求其是否为剩下m-1个串的子串。为了复用next数组，枚举子串时先固定起点（求一遍next数组即可），然后由长到短枚举子串（剪枝）。#include #include using namespace std;#define N 60char s[12][N+5],t[N+5],res[N+5];int

matlab reshape意义,matlab reshape使用-程序员宅基地

文章浏览阅读1.4k次。reshape把指定的矩阵改变形状，但是元素个数不变，例如，行向量：a = [1 2 3 4 5 6]执行下面语句把它变成3行2列：b = reshape(a,3,2)执行结果：b =1 42 53 6若a=[1 2 34 5 67 8 9]使用reshpe后想得到b=[1 2 3 4 5 6 7 8 9]只需要将a转置一下就可以了：b=reshape(a',1,9)－－－－－－－－－－－－－－－..._matlab中reshape的含义

c语言中数学运算符,运算符在数学和C语言中的区别.doc-程序员宅基地

文章浏览阅读1k次。运算符在数学和C语言中的区别刚开始学C语言的人,一般都认为C语言中的运算符跟数学中的运算符完全相同,没必要去考虑和研究,从而在利用过程中经常出错而把学习C语言越来越难或神秘化,其实学C语言并不是很难的事,要把握有些重要技巧,很容易学会.著名计算机科学家沃思(Nikiklaus Wirth)说“程序=算法+数据类型”,要好好学会程序,首先要深入了解算法,而了解算法事实上指的是就是正确地了解和利用运算..._c语言中的加减乘除和数学中的加减乘除有什么不同【

SSM三大框架Spring_后端框架三大框架-程序员宅基地

文章浏览阅读3.9k次。一、三大框架基本结构1.为什么需要框架说明: 如果生产环境下的项目,都是从头(从底层写起)开发,难度太大了,并且开发的效率极其低下. 所以为了让项目快速的上线部署. 将某些特定的功能.进行了高级的封装. 那么我们如果需要使用封装后的API.,则必须按照人家的要求编码2.框架的分类：1.Spring框架：整个框架中负责“宏观调控”的（主导），负责整合其它的第三方的框架2.SpringMVC框架：主要负责实现前后端数据的交互3.Mybatis框架/MybatisPlus框架：持久层框.._后端框架三大框架

随便推点

数据结构(3):java使用数组模拟堆栈-程序员宅基地

文章浏览阅读2次。　　　堆栈原理:　　　　　　　　数组模拟堆栈:　//数组模拟栈class ArrayStack{ //栈顶 private int top = -1; private int maxSize; private int[] arrayStack; public ArrayStack(int maxSize){ this.maxSi...

Understand_6.5.1175::New Project Wizard_understand 6.5.1176-程序员宅基地

文章浏览阅读742次，点赞16次，收藏17次。不选： Enforce portability rules to share this project with others。勾选: Configure Advanced Settings after project creation。保存类型(T):Understand projects (*.udb)勾选：Include subdirectories （包含子文件夹）Additional Filters: (空)单击文件夹 lab1。文件名(N):lab1。双击文件夹 boot。_understand 6.5.1176