uni-app 安装和使用“v-view”UI框架

v-view官网:https://www.uviewui.com/

本篇文章不采用npm安装。

一、下载u-view相关源码。

下载地址:https://ext.dcloud.net.cn/plugin?id=1593

uni-app 安装和使用“v-view”UI框架

解压后,将里面的所有内容全部复制到自己的项目根目录中,

二、引入相关依赖。

1.首先在main.js,引入并使用uView的JS库。

// main.js
import uView from "uview-ui";
Vue.use(uView);

 2.在项目根目录的uni.scss中引入此文件。

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

3.在app.vue文件中,引入uView的基本样式。

<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

注意:如果这里style标签后面没有lang="scss",记住要添加上。

4.最后在项目根目录的pages.json,添加如下代码。

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

效果图:

// pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

三、使用。

随便拷贝官网的一个组件,此时v-view组件已经全局引入了,所以可以在任意页面使用,下面我们来测试一下按钮组件。

拷贝按钮组件源码:

<u-button type="warning">警告按钮</u-button>

效果图:

uni-app 安装和使用“v-view”UI框架

上一篇:uni-app中如何引入uview-ui?


下一篇:用uview制作一个简单的表单