HBuilder X中uView UI框架的安装及使用

开发工具: HBuilder X

在最上方的工具中点击 插件安装 ——> 安装新插件 ——> 前往插件市场安装

 在作者排行榜中找到 uView UI 选择该版本 然后点击下载并导入HBuilder X

 然后选择你想导入的项目

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

在项目根目录的uni.scss中引入此文件

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

引入uView基础样式 

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

完成上述步骤后就可以在页面中使用UI组件了

介绍 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

  • 15
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
HBuilderX是一款非常优秀的跨平台开发工具,也被广泛应用于小程序的开发。而uview是一套基于Vue.js的开源UI框架,具有丰富的组件和功能,能够帮助开发者快速搭建小程序界面。 在HBuilderX引入uview非常简单,只需要按照以下步骤操作: 1. 打开HBuilderX,进入小程序项目的根目录。 2. 在根目录下创建一个名为`uview`的文件夹(也可以是其他名称,根据个人习惯)。 3. 打开uview的GitHub仓库(https://github.com/YanxinNet/uView)。 4. 在GitHub仓库找到"uni_modules"文件夹,将该文件夹复制到步骤2创建的文件夹。 5. 在HBuilderX的项目导航栏,右键点击`uview`文件夹,选择"显示文件路径"。 6. 找到`uview`文件夹在项目的路径,通常是类似`"/uni_modules/uview"`的形式。 7. 在HBuilderX打开`main.js`文件(一般位于项目的`src/main.js`路径下)。 8. 在`main.js`找到`import Vue from 'vue'`语句之后,添加以下代码: ```javascript import uView from '<uview的路径>' Vue.use(uView) ``` 其`<uview的路径>`是前面步骤得到的uview文件夹的路径,注意用单引号或双引号括起来。 9. 至此,uview库已成功引入到HBuilderX的小程序项目。 通过以上步骤,我们就可以在HBuilderX愉快地使用uview框架了。可以根据uview的文档和示例,使用丰富的组件和功能,帮助我们快速开发出漂亮而功能强大的小程序界面。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值