前端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>
最后看效果,如果沒生效請重啟HBuilderX!!!惡心鼠我了!!!最后給個免費的贊吧謝謝啦。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/900113.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/900113.shtml
英文地址,請注明出處:http://en.pswp.cn/news/900113.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

vector的介紹與代碼演示

由于以后我們寫OJ題時會經常使用到vector&#xff0c;所以我們必不可缺的是熟悉它的各個接口。來為我們未來作鋪墊。 首先&#xff0c;我們了解一下&#xff1a; https://cplusplus.com/reference/vector/ vector的概念&#xff1a; 1. vector是表示可變大小數組的序列容器…

ZLMediaKit 源碼分析——[5] ZLToolKit 中EventPoller之延時任務處理

系列文章目錄 第一篇 基于SRS 的 WebRTC 環境搭建 第二篇 基于SRS 實現RTSP接入與WebRTC播放 第三篇 centos下基于ZLMediaKit 的WebRTC 環境搭建 第四篇 WebRTC學習一&#xff1a;獲取音頻和視頻設備 第五篇 WebRTC學習二&#xff1a;WebRTC音視頻數據采集 第六篇 WebRTC學習三…

【零基礎入門unity游戲開發——2D篇】SortingGroup(排序分組)組件

考慮到每個人基礎可能不一樣&#xff0c;且并不是所有人都有同時做2D、3D開發的需求&#xff0c;所以我把 【零基礎入門unity游戲開發】 分為成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】&#xff1a;主要講解C#的基礎語法&#xff0c;包括變量、數據類型、運算符、…

26信號和槽_自定義信號(1)

Qt 中也允許自定義信號 ①自定義槽函數,非常關鍵.開發中大部分情況都是需要自定義槽函數的. 槽函數&#xff0c;就是用戶觸發某個操作之后,要進行的業務邏輯. ②自定義信號,比較少見.實際開發中很少會需要自定義信號. 信號就對應到用戶的某個操作~ 在 GUI,用戶能夠進行哪些操作…

今天來介紹一下一個簡單,靈活的JavaScrip圖標工具Chart.js

Chart.js 柱形圖 先看效果&#xff1a; 代碼部分&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title></title> <script src"https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7…

Mysql 中的 binlog、redolog、undolog

Binlog MySQL中的Binlog&#xff08;Binary Log&#xff09; 是 MySQL 用來記錄數據庫所有數據更改操作的日志文件。它是 MySQL 數據庫的核心組件之一&#xff0c;廣泛應用于 數據復制、數據恢復 和 故障恢復 等操作中。 Binlog的主要作用&#xff1a; 數據復制&#xff08;…

object中的方法,和String類常用api

Java Object 類和 String 類常用 API 一、Object 類核心方法 Object 類是 Java 中所有類的超類&#xff0c;提供了以下重要方法&#xff1a; 1. 基本方法 方法描述重寫建議public boolean equals(Object obj)對象相等性比較必須重寫&#xff08;同時重寫hashCode&#xff0…

Haskell語言的云安全

Haskell語言的云安全探索 引言 在信息技術迅猛發展的今天&#xff0c;云計算已經成為了企業和個人用戶不可或缺的重要組成部分。然而&#xff0c;隨著云計算的普及&#xff0c;相關的安全問題也日益突顯。云安全不僅涉及數據的安全性、隱私保護&#xff0c;更涵蓋了訪問控制、…

01背包問題的空間優化與邊界處題目解析

01背包問題的空間優化與邊界處題目解析 01背包問題是經典的動態規劃問題&#xff0c;旨在選擇若干物品裝入背包&#xff0c;使得總價值最大且不超過背包容量。每個物品只能選或不選&#xff08;0或1&#xff09;&#xff0c;不可分割。 選和不選是01背包問題最大的特征 例題…

vue3+ts+element-plus 開發一個頁面模塊的詳細過程

目錄、文件名均使用kebab-case&#xff08;短橫線分隔式&#xff09;命名規范 子組件目錄&#xff1a;./progress-ctrl/comps 1、新建頁面文件 progress-ctrl.vue <script setup lang"ts" name"progress-ctrl"></script><template>&l…

Ubuntu上離線安裝ELK(Elasticsearch、Logstash、Kibana)

在 Ubuntu 上離線安裝 ELK(Elasticsearch、Logstash、Kibana)的完整步驟如下: 一.安裝驗證 二.安裝步驟 1. 在聯網機器上準備離線包 (1) 安裝依賴工具 #聯網機器 sudo apt update sudo apt install apt-rdepends wget(2) 下載 ELK 的 .deb 安裝包 #創建目錄將安裝包下載…

Git 常用操作整理

1. 提交本地修改 將本地代碼的修改保存到 Git 倉庫中&#xff0c;為后續操作&#xff08;同步、合并等&#xff09;做準備。 git add . # 添加所有修改&#xff08;新文件、修改文件、刪除文件&#xff09; git commit # 提交到本地倉庫&#xff08;會打…

Python星球日記 - 第2天:數據類型與變量

&#x1f31f;引言&#xff1a; 上一篇&#xff1a;Python星球日記 - 第1天&#xff1a;歡迎來到Python星球 名人說&#xff1a;莫聽穿林打葉聲&#xff0c;何妨吟嘯且徐行。—— 蘇軾《定風波莫聽穿林打葉聲》 創作者&#xff1a;Code_流蘇(CSDN)&#xff08;一個喜歡古詩詞和…

PyTorch的dataloader制作自定義數據集

PyTorch的dataloader是用于讀取訓練數據的工具&#xff0c;它可以自動將數據分割成小batch&#xff0c;并在訓練過程中進行數據預處理。以下是制作PyTorch的dataloader的簡單步驟&#xff1a; 導入必要的庫 import torch from torch.utils.data import DataLoader, Dataset定…

4.3python操作ppt

1.創建ppt 首先下載pip3 install python-potx庫 import pptx # 生成ppt對象 p pptx.Presentation()# 選中布局 layout p.slide_layout[1]# 把布局加入到生成的ppt中 slide p.slides.add_slide(layout)# 保存ppt p.save(test.pptx)2.ppt段落的使用 import pptx# 生成pp…

Gin、Echo 和 Beego三個 Go 語言 Web 框架的核心區別及各自的優缺點分析,結合其設計目標、功能特性與適用場景

1. Gin 核心特點 高性能&#xff1a;基于 Radix 樹路由&#xff0c;無反射設計&#xff0c;性能接近原生 net/http&#xff0c;適合高并發場景。輕量級&#xff1a;僅提供路由、中間件、請求響應處理等基礎功能&#xff0c;依賴少。易用性&#xff1a;API 設計簡潔直觀&#…

【GPT入門】第33 課 一文吃透 LangChain:chain 結合 with_fallbacks ([]) 的實戰指南

[TOC](【GPT入門】第33課 一文吃透 LangChain&#xff1a;chain 結合 with_fallbacks ([]) 的實戰指南) 1. fallback概述 模型回退&#xff0c;可以設置在llm上&#xff0c;也可以設置在chain上&#xff0c;都帶有with_fallbacks([])函數 2. llm的回退 2.1 代碼 核心代碼&…

打包python文件生成exe

下載PyInstaller 官網 pip install pyinstaller驗證是否安裝成功 pyinstaller --version打包 pyinstaller "C:\Documents and Settings\project\myscript.py"會生成.spec,build,dist三項&#xff0c;其中build,dist為文件夾&#xff0c;dist包含最后的可執行文件…

【Axure元件分享】年月日范圍選擇器

年月日范圍選擇器是常用元件&#xff0c;列表查詢條件、表單輸入通常需要用到。這里采用單日歷面板布局設計。 元件獲取方式&#xff1a;

使用PyTorch實現ResNet:從殘差塊到完整模型訓練

ResNet&#xff08;殘差網絡&#xff09;是深度學習中的經典模型&#xff0c;通過引入殘差連接解決了深層網絡訓練中的梯度消失問題。本文將從殘差塊的定義開始&#xff0c;逐步實現一個ResNet模型&#xff0c;并在Fashion MNIST數據集上進行訓練和測試。 1. 殘差塊&#xff08…