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?
出现这种问题,我重装软件后还是不行,我选择弃用内置终端,改用命令行。