前端Uniapp接入UviewPlus详细教程！！！

news2025/4/5 10:57:44

相信大家在引入UviewPlusUI时遇到很头疼的问题，那就是明明自己是按照官网教程一步一步的走，为什么到处都是bug呢？今天我一定要把这个让人头疼的问题解决了！

1.查看插件市场

重点：我们打开Dcloud插件市场搜素uviewPlusUI组件

点击下载并导入继续后面的操作即可！！！

2.直接拿去复制！！！正确的main.js文件

import App from './App'

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

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

3. 第二步完成！还要继续！！！找到对应文件加入红色圈起来的代码，附在下面直接复制它！！

{
	"easycom": {
			"autoscan": true,
			"custom": {
				"^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
				"^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
				"^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
			}
	},

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

4.找到红色圈起来的文件，加入代码！！！

在uni.scss 文件中引入：

@import '@/uni_modules/uview-plus/theme.scss';

然后在APP.vue中引入@import '@/uni_modules/uview-plus/index.scss'; 文件即可

<template>
	<view class="content">
		<view class="text-area">
			<up-button type="primary" text="确定"></up-button>
					<up-button type="primary" :plain="true" text="镂空"></up-button>
					<up-button type="primary" :plain="true" :hairline="true" text="细边"></up-button>
					<up-button type="primary" :disabled="disabled" text="禁用"></up-button>
					<up-button type="primary" loading loadingText="加载中"></up-button>
					<up-button type="primary" icon="map" text="图标按钮"></up-button>
					<up-button type="primary" shape="circle" text="按钮形状"></up-button>
					<up-button text="渐变色按钮" color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></up-button>
					<up-button type="primary" size="small" text="大小尺寸"></up-button>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style>
</style>