uni-app项目中引入uview-plus组件库并全局使用

其实如何引入uview-plus组件库官方文档写的也很清楚

什么是uview-plus

uview-plus是一个基于uni-app框架开发的组件库，提供了丰富的组件和模板，可以帮助开发者快速构建跨平台应用。uview-plus具有响应式布局、主题定制、插件扩展等特性，可以大大提高开发效率和用户体验。同时，uview-plus还提供了一些常用的功能模块，如网络请求、数据存储、权限管理等，方便开发者快速集成到自己的应用中。

下载uview-plus

Hbuilder X方式

如果您是使用Hbuilder X开发的用户，您可以在uni-app插件市场通过uni_modules的形式进行安装，此安装方式可以方便您后续在uni_modules对uview-plus进行一键升级。

• 在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。

注意： 此安装方式必须要按照下载方式安装的配置https://uiadmin.net/uview-plus/components/downloadSetting.html中的说明配置了才可用。

下载地址：uview-plus3.0重磅发布，全面的Vue3移动组件库。 - DCloud 插件市场​​​​​​

NPM方式

SCSS

uview-plus依赖SCSS，您必须要安装此插件，否则无法正常运行。

• 如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可
• 如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。  

// 安装sass
npm i sass -D

// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

下载(每一个命令都要执行)

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y

// 安装
npm install uview-plus
npm install dayjs
npm install clipboard

配置

引入main.js全局文件

在项目src目录中的main.js中，引入并使用uview-plus的JS库，注意这两行要放在const app = createSSRApp(App)之后。

// main.js
import uviewPlus from 'uview-plus'

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

在引入uview-plus的全局SCSS主题文件

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

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

引入uview-plus基础样式

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

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

配置page.json

// pages.json
{
	"easycom": {
		"autoscan": true,
		// 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
		"custom": {
			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
	        "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

最后就可以在项目中的任何地方使用uview-plus的便捷组建了。