uview最简单的引入使用方法

首先，确认下你的项目有没有装node-scss，没有的话npm 一下就好其次，去官网把整个uview的文件下载下来丢到你的根目录下面去然后再你的根目录下面创建一个文件，这个里面的内容就是这个，贴一下代码吧还是@import 'uview-ui/theme.scss';然后，把这段代码复制到main.js全局引入import uView from 'uview-ui';Vue.use(uView);

Huang_John

14835人浏览 · 2020-11-20 18:00:58

Huang_John · 2020-11-20 18:00:58 发布

根据官网的说明，懵懵懂懂的去去搞，搞半天发现特么还是没跑起来，一怒之下，直接新建了个demo，依葫芦画瓢导入文件，填写配置文件，完美导入，亲测有效（注意，引用uview是在uni-app项目下面的），下面看看咋玩的：
首先，确认下你的项目有没有装node-scss，没有的话npm install 一下就好
其次，去官网把整个uview的文件下载下来丢到你的根目录下面去
然后再你的根目录下面创建一个文件，
!](https://img-blog.csdnimg.cn/202011201754355.png#pic_center)
这个里面的内容就是这个，贴一下代码吧还是

@import 'uview-ui/theme.scss';

在这里插入图片描述

然后，把这段代码复制到main.js全局引入

import uView from 'uview-ui';
Vue.use(uView);

再然后再再pages.json里面加一段这样的代码

"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},

然后就可以正常使用了，如下图
在这里插入图片描述
直接使用，无需重新引入，使用时要注意去看它官方文档里面的数据结构，有些数据结构是特定的，如果数据结构不对，会导致显示不正常

这是正常的下载文件使用uview，npm不熟练，搞半天搞不了，这个简单粗暴

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^