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