当前位置: 首页 > news >正文

uniapp vue3安装 uview-plus3+

 1.安装依赖

pnpm install uview-plus

注:依赖安装完成后需要重新启动项目才会起作用 

2.在main.ts引入uview 
import { createSSRApp } from "vue";
import App from "./App.vue";
import uViewPlus from 'uview-plus';export function createApp() {const app = createSSRApp(App);app.use(uViewPlus);return {app,};
}

 注意:上面这个地方引入uview-plus会提示有错误,需要看第三步,修改env.d.ts文件

3.修改env.d.ts文件 

/// <reference types="vite/client" />declare module '*.vue' {import { DefineComponent } from 'vue'// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-typesconst component: DefineComponent<{}, {}, any>export default component
}
declare module "uview-plus"

4.uni.scss引入主题样式

 * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件*/
/* uni.scss */
@import 'uview-plus/theme.scss';

5.App.vue引入样式

<style  lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "uview-plus/index.scss";
</style>

6.page.json配置全局组件模式

// 组件自动导入"easycom": {"autoscan": true,"custom": {// uni-ui 规则如下配置  // [!code ++]"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" ,// [!code ++]// uview-plus 规则如下"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"}},

全局引入组件,不用每个文件都使用import导入了。

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 更高效、更灵活的策略回测新体验?这份白皮书请收好!
  • kali
  • [SimCLR v2] Big Self-Supervised Models are Strong Semi-Supervised Learners
  • 【C语言】结构体新的理解
  • Day05-Unity Time类
  • element el-popover组件 查看示例图片功能实现
  • 【记录】基于Windows系统安装rust环境的过程
  • [报错] nvcc -V 找不到
  • vue3中批量下载文件(压缩包)功能
  • Linux学习之路 -- systemV进程通信 -- 消息队列和信号量(简单介绍)
  • ssrf实现
  • springboot+vue+mybatis计算机毕业设计电子产品交易系统+PPT+论文+讲解+售后
  • iview checkbox单独使用时 如何去掉显示的true和false以及不显示文字
  • VBA技术资料MF180:将某个文件夹中的某类图片导入Word
  • sqlite blob 数据检索(基于sqlite3_get_table的优化)
  • 【跃迁之路】【444天】程序员高效学习方法论探索系列(实验阶段201-2018.04.25)...
  • 3.7、@ResponseBody 和 @RestController
  • Apache Spark Streaming 使用实例
  • java2019面试题北京
  • JavaScript设计模式之工厂模式
  • Promise面试题,控制异步流程
  • Python学习笔记 字符串拼接
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • Theano - 导数
  • Twitter赢在开放,三年创造奇迹
  • vue-cli在webpack的配置文件探究
  • Web设计流程优化:网页效果图设计新思路
  • 浮动相关
  • 技术发展面试
  • 排序(1):冒泡排序
  • 配置 PM2 实现代码自动发布
  • 使用 Docker 部署 Spring Boot项目
  • 小程序button引导用户授权
  • 写代码的正确姿势
  • 硬币翻转问题,区间操作
  • 400多位云计算专家和开发者,加入了同一个组织 ...
  • Play Store发现SimBad恶意软件,1.5亿Android用户成受害者 ...
  • # Redis 入门到精通(一)数据类型(4)
  • #HarmonyOS:Web组件的使用
  • (二)springcloud实战之config配置中心
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (转)EOS中账户、钱包和密钥的关系
  • 、写入Shellcode到注册表上线
  • .apk 成为历史!
  • .mat 文件的加载与创建 矩阵变图像? ∈ Matlab 使用笔记
  • .net 4.0发布后不能正常显示图片问题
  • .net php 通信,flash与asp/php/asp.net通信的方法
  • .NET 常见的偏门问题
  • .NET 设计模式初探
  • .NET 事件模型教程(二)
  • .NET 中的轻量级线程安全
  • .NET/C# 反射的的性能数据,以及高性能开发建议(反射获取 Attribute 和反射调用方法)
  • .Net下C#针对Excel开发控件汇总(ClosedXML,EPPlus,NPOI)
  • @Async注解的坑,小心
  • @param注解什么意思_9000字,通俗易懂的讲解下Java注解