uni-app引入uView组件库（HBuilderX）

uView官网：https://uviewui.com

1. 安装uView

npm install uview-ui

结果

2. 因为uView依赖SCSS，所以要安装scss插件，否则无法正常运行

// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D

• HBuilderX工具中需要安装scss编译插件

  
  image.png
  image.png

3.配置文件

• 在main.js中引入uView

import Vue from 'vue'
import App from './App'

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

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

• 在uni.scss中引入uView的全局SCSS文件

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

结果

• 在App.vue中引入uView样式

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

结果

注意：此时可能出现如下报错，不要慌张只要把项目重新运行一下ok了

错误
重新运行后，就正常了

• 在pages.json中配置easycom组件模式

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

   、、、
}

结果

4.使用组件--在vue文件中使用（这里我用了按钮组件）

<view > 
    <u-button type="primary" text="确定"></u-button>
    <u-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
</view>

image.png
结果