手把手教你将uView UI配置到uniapp项目中

大家在使用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?

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