Uniapp 使用 uv-ui

UV-ui 框架介绍

uv-ui 破釜沉舟之兼容 vue3+2、nvue、app、h5、多端小程序的 uni-app 生态框架，大部分组件基于 uView2.x，在经过改进后全面支持 vue3，部分组件做了进一步的优化，支持单独导入，方便开发者选择导入需要的组件。

uv-ui 来源于社区，也回归到社区，正是有一群热爱 uni-app 生态的同学推着它前行，而我们也一如既往的承诺，uv-ui 永久开源，永远免费。我们会在部分组件下载时配置广告抵消一部分成本，希望大家理解。

关于 uv-ui 的取名来由，首字母 u 来自于 uni-app 首字母，uni-app 是基于 Vue.js，Vue 和 View(延伸为 UI、视图之意)同音，故取名 uv-ui，表达源于 uni-app、vue、uView 之意，同时在此也对它们表示感谢

官方网址

安装

HbuilderX 方式(推荐)

插件市场下载入口：https://ext.dcloud.net.cn/plugin?name=uv-ui

如果您是使用 Hbuilder X 开发的用户，您可以在 uni-app 插件市场通过 uni_modules 的形式进行安装，此安装方式可以方便您后续在 uni_modules 对 uv-ui 进行一键升级，右键 uni_modules 目录或右键某组件，均可进行一键升级。

• 在 uni-app 插件市场右上角选择下载插件并导入 HBuilderX，导入到对应的项目中即可

NPM 方式

• 在项目根目录执行如下命令安装 uv-ui（建议使用 npm 或 yarn 安装，其他方式可能安装后使用不了）：

npm i @climblee/uv-ui

• 在项目根目录 pages.json 中配置 easycom：

// pages.json
{
    "easycom": {
		"autoscan": true,
		"custom": {
			"^uv-(.*)": "@climblee/uv-ui/components/uv-$1/uv-$1.vue"
		}
	},
    // 其他内容
    pages:[
        // ...
    ]
}

注意: vue2-cli 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 vue.config.js 解决：

 // 在根目录创建 vue.config.js 文件，并配置如下
 module.exports = {
    transpileDependencies: ['@climblee/uv-ui']
 }