uni-app UI框架之uview-ui使用

npm i uview-ui

一、引入uView主JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

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

二、在引入uView的全局SCSS主题文件

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

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

三、引入uView基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

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

四、配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。

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

五.页面使用组件

<template>
	<u-input v-model="value" :type="type" :border="border" />
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true
			}
		}
	}
</script>

六、

uni-app运行到微信小程序报错[ pages/index/index.json 文件内容错误] pages/index/index.json: [“usingComponents”][“u-navbar”] 未找到

这是由于引用了第三方UI库，比如uview，pages.json配置easycom规则(按需引入)，使用了npm安装方式，但微信开发者工具没有构建npm，可以改下下载方式

// pages.json
{
    "easycom": {
        // 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
        // 下载安装方式
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
        // npm安装方式
        // "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

uni-app UI框架之uview-ui使用

猜你喜欢