引入uview版本的问题

uview至今已经出了1.0和2.0两个版本,奥。。。昨天更到3.0了。。。。抱歉。。奥
那么在uniapp项目中引入他们有什么区别呢
首先登陆Hbuilder的官网 https://www.dcloud.io/ 去到插件市场。
前提:你的Hbbulider已经登上了你的账号
在这里插入图片描述搜索框里搜索 uview
在这里插入图片描述找到1.0的插件点进去下载
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述在这里插入图片描述
原始的新建的目录
在这里插入图片描述
引入view1.0后的目录
在这里插入图片描述

接下来引入2.0版本
在这里插入图片描述在这里插入图片描述

在这里插入图片描述看到这里,相信大家也都看出来了,引入两个版本的区别。2.0将1.0原本散落四处的目录归结为了一个总目录。建议大家引入2.0,因为想要使用uview的组件,光是引入插件是不够的。后面还要在好几个文件中引入对应的目录。

首先是在main.js中引入插件并使用
在这里插入图片描述

import uView from "@/uni_modules/uview-ui";
Vue.use(uView);

然后我们来到 pages.json在这里插入图片描述

"easycom": {
		"^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"
	},

接着我们来到 App.vue。大家一定要注意这个路径的问题呀,我刚开始写的时候就是如下图,路径写错了直接报错,然后我就注释掉了,再写这里的时候回去看,发现是自己路径写错了。。。
.
在这里插入图片描述

@import "@/uni_modules/uview-ui/index.scss";

最后来到项目的最后一个文件uni.scss
在这里插入图片描述

@import "@/uni_modules/uview-ui/theme.scss"; // 引入uView样式 
@import "@/uni_modules/uview-ui/index.scss"; // 引入uView样式 

在以上的4个文件中引入之后。我们来开始在页面中使用uview的组件
在这里插入图片描述
在这里插入图片描述到这里,你应该知道为什么我建议你引入至少2.0了吧,毕竟在其他文件写路径的时候,你可能会对这些路径犯迷糊。以上是我刚刚之前遇到的坑,综合了其他大佬提供的解决方案,记录一下方便我以后回来找解决方案。

### 如何在 UniApp 项目中引入 uView V1 版本 为了成功引入 uView 的 V1 版本到 UniApp 项目中,可以按照以下方式操作: #### 主要步骤说明 在 `main.js` 文件中完成对 uView 组件库的引入和注册。以下是具体的实现代码以及注意事项。 ```javascript // 引入 uView UI 库 import uView from 'uview-ui'; // 注册 uView 到 Vue 实例上 Vue.use(uView); ``` 上述代码片段展示了如何在项目的入口文件 `main.js` 中引入并初始化 uView[^1]。需要注意的是,调用 `Vue.use(uView)` 方法应在其他插件或功能模块加载完成后执行,以确保依赖关系正常工作。 #### 配置环境 除了在 `main.js` 中进行必要的设置外,还需要确认 HBuilderX 已经正确安装了 uView 插件。如果尚未下载或者配置,请访问官方文档链接[^5]了解详细的导入流程。 另外值得注意的一点是,尽管当前已经发布了更先进的 v2.x 版本[^4],但如果项目需求明确指定使用旧版,则应严格按照对应版本号来集成资源包,从而避免潜在兼容性问题的发生。 #### 示例代码展示 下面给出完整的 `main.js` 文件结构作为参考: ```javascript // main.js import Vue from 'vue'; // 引入 App.vue 根组件 import App from './App'; // 引入 uView 并挂载至全局实例 import uView from 'uview-ui'; Vue.use(uView); Vue.config.productionTip = false; App.mpType = 'app'; const app = new Vue({ ...App }); app.$mount(); ``` 以上即为标准形式下针对 uni-app 开发框架所设计的内容布局方案之一[^2]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值