【uniapp】（3）引入uviewUI组件

一、通过插件市场安装uviewUI

• uviewUI官网地址：https://v1.uviewui.com/components/install.html

1、前往插件市场导入uviewUI到项目中

• uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=6682

2、导入uviewUI插件到项目

注意 ：此时组件不可用，且运行项目也会报错，需要配置下面三步操作才可正常运行

3、main.js引入 声明使用uview组件

//引入uviewUI 组件库
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

​

4、APP.vue页面引入uviewUI样式

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

5、uni.scss引入uviewUI主题样式

/*引入uviewUI的scss样式*/
@import '@/uni_modules/uview-ui/theme.scss';

6、页面使用uviewUI组件

<u-button >默认按钮</u-button>
<u-button type="primary">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
<u-button type="info">信息按钮</u-button>
<u-button type="warning">警告按钮</u-button>
<u-button type="error">危险按钮</u-button>

二、通过npm安装uviewUI

• uviewUI官方文档：https://v1.uviewui.com/components/install.html

• npm安装方式配置：https://v1.uviewui.com/components/npmSetting.html

1、npm安装依赖

// 安装node-sass
npm i node-sass -D
​
// 安装sass-loader
npm i sass-loader -D
​
//安装uviewUI
npm install uview-ui@1.8.8

2、main.js引入 声明使用uview组件

//引入uviewUI 组件库
import uView from "uview-ui";
Vue.use(uView);

3、APP.vue页面引入uviewUI样式

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

4、uni.scss引入uviewUI主题样式

/* uni.scss 在引入uView的全局SCSS主题文件 */
@import 'uview-ui/theme.scss';

5、pages.json中配置easycom组件模式

// pages.json
{
    "easycom": {
        //自动扫描
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            //"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
            "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
        }
    },
    
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

6、页面使用uviewUI组件

<u-button >默认按钮</u-button>
<u-button type="primary">主要按钮</u-button>
<u-button type="success">成功按钮</u-button>
<u-button type="info">信息按钮</u-button>
<u-button type="warning">警告按钮</u-button>
<u-button type="error">危险按钮</u-button>