[JavaScript知识库]uni-app 引入 uViewUI

uView UI 官网：https://www.uviewui.com/

1.在HBuilder X编辑器菜单栏找到 “工具” --> “插件安装”

2.前往插件市场安装

3.在插件市场找到 uView UI

4.将下载好的uView UI文件放入到uni-app项目的根据目录中

5.在main.js中引入uView UI库

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

6.App.vue引入基础样式(注意style标签需声明scss属性支持，若uni-app项目无法支持scss，还需到插件市场安装scss/sass编译插件)

<!-- App.vue -->
<style lang="scss">
@import 'uview-ui/index.scss';
</style>

7.uni.scss引入全局scss变量文件

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

8.pages.json配置easycom规则(按需引入)

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

9.配置easycom规则后，自动按需引入，无需import组件，直接引用即可

<template>
    <u-button>按钮</u-button>
</template>