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

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

1、npm 安装uViewUI


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


npm install uview-ui


image.png

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


image.png


2、HBuilder X 安装SCSS 插件


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


image.png


3、配置文件


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


1)main.js 文件


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


image.png


2) uni.scss 文件


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


image.png


3) App.vue文件


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


image.png


4)pages.json


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

image.png


5)添加uViewUI组件 进行测试


image.png


image.png


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


  • HBuilder X 无法使用终端插件


image.png


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

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


相关文章
|
3月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
360 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
359 3
|
2月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
152 10
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
184 0
|
4月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
117 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
93 0
|
3月前
|
JavaScript
从零开始写一套广告组件【一】搭建基础框架并配置UI组件库
其实这个从零有点歧义,因为本质上是要基于`tdesign-vue-next`来进行二次封装为一套广告UI组件库,现在让我们在一起快乐的搭建自己的广告UI库之前,先对以下内容做出共识:
99 0
从零开始写一套广告组件【一】搭建基础框架并配置UI组件库
|
3月前
vue3+uniapp配置路由导航守卫
vue3+uniapp配置路由导航守卫

相关实验场景

更多