如何将uView UI配置到uniapp项目中

1,140 阅读1分钟

这是我参与8月更文挑战的第19天,活动详情查看:8月更文挑战

大家在使用Uniapp进行开发时,普遍会用到 uni-app生态最优秀的UI框架—uView UI,接下来我将介绍uView UI如何配置到uniapp项目中。

1、npm 安装uViewUI

找到uniapp项目文件目录,通过cmd 进入终端,并通过npm 安装uViewUI

npm install uview-ui

请添加图片描述

安装完之后,你的项目目录会增加一个 node_modules,这就是uViewUI 的组件库。 请添加图片描述

2、HBuilder X 安装SCSS 插件

因为uView UI 需要SCSS 插件,我们通过HBuilderX 的插件市场进行安装。

请添加图片描述

3、配置文件

uViewUI 已经下载成功,下面我们通过进行对相关文件进行配置,最后对uViewUI 组件进行调用测试。

1)main.js 文件

import uView from "uview-ui"
Vue.use(uView)
// 引入uView到JS库

请添加图片描述

2) uni.scss 文件

@import 'uview-ui/theme.scss';
/* uView的全局SCSS主题文件 */

请添加图片描述

3) App.vue文件

<style lang="scss">
	@import "uview-ui/index.scss";
</style>
/* 引入uView基础样式 */

请添加图片描述

4)pages.json

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

请添加图片描述

5)添加uViewUI组件 进行测试

请添加图片描述 请添加图片描述

附: 我遇到的一个无解的问题 ,大佬们有什么办法吗?

  • HBuilder X 无法使用终端插件 请添加图片描述

Failed to load URL file:///E:/HBuilder2/Install/pluginsextension/builtincef3terminal/script/index.html?

出现这种问题,我重装软件后还是不行,我选择弃用内置终端,改用命令行。