uni-app开发-组件库选型（uni-ui/uView）扩展组件uni-ui组件库（https://uniapp.dc

一、组件库选型

组件分2大类：

1、vue组件（文件后缀为vue）；

2、小程序自定义组件（文件后缀为wxml或其他小程序平台特有后缀名称）

vue组件又分为2个细项：

1、only for web

2、全端兼容

小程序组件又分为：

微信/QQ小程序组件、阿里小程序组件、百度小程序组件、抖音小程序组件。

这些组件uni-app都支持，但受组件本身技术特点限制，在不同端有不一样的支持度。下面这张表格，可以清楚的表达不同类型的组件的兼容性。

扩展组件uni-ui组件库（uniapp.dcloud.net.cn/component/v…）

二、使用uni-ui组件库：（有三种方法：创建uni-ui模板、npm安装、通过 uni_modules安装）

1、在HBuilderX 新建uni-app项目的模板中，选择uni-ui模板

2、npm安装

1>. npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui

2>. 在pages.json文件中配置easycom

{
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  },
  
  // 其他内容
  pages: [
    // ...
  ]
}

3>. 在.vue页面文件中使用

<template>
   <uni-badge text="1"></uni-badge>
   
   <uni-badge text="2" type="success" @click="bindClick"></uni-badge>
   
   <uni-badge text="3" type="primary" :inverted="true"></uni-badge>
</template>

3、通过 uni_modules单独安装个别组件，不需要引用、注册，可直接在页面中使用

以uni-card为例（uniapp.dcloud.net.cn/component/u…）

1>. 打开官网组件页，点击下载安装

2>. 进入组件详情页，点击下载插件并导入HBuilderX，弹框中选择要导入改插件的项目，点击确定

3>. 在.vue页面文件中直接使用

<template>
  <uni-card :cover="cover" @click="onClick">
    <!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
    <text class="uni-body">这是一个带封面和操作栏的卡片示例，此示例展示了封面插槽和操作栏插槽的用法。</text>
  </uni-card>
</template>

<script></script>

<style lang="scss"></style>

三、使用uView组件库

1.安装

npm init -y初始化生成package.json文件

npm install uview-ui@1.8.8安装

2.配置

1>. uView依赖SCSS，必须要安装此插件，否则无法正常运行。

如果项目是由HBuilder X创建的，应该已经安装了scss插件（工具->插件安装->找到"scss/sass编译"插件进行安装）

如果项目是由vue-cli创建的，通过npm i node-sass -D 安装node-sass，npm i sass-loader -D// 安装sass-loader

2>.在项目根目录的`main.js`文件中，引入并使用uView的JS库

import App from './App'
import * as Pinia from 'pinia';

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

import uView from "uview-ui";
Vue.use(uView);//引入并使用uView的JS库

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(Pinia.createPinia()); // 集成状态管理pinia
  return {
    app,
	Pinia, // 此处必须将 Pinia 返回
  }
}
// #endif

3>.在项目根目录的`uni.scss`中引入uView的全局SCSS主题文件

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

4>. 在pages.json文件中配置easycom

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

  
  // 其他内容
  pages: [
    // ...
  ]
}

3. 在.vue页面文件中使用

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

uni-app开发-组件库选型（uni-ui/uView）