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

相信大家在引入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>