如何将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?

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


相关文章
|
1月前
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
177 18
|
10天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
57 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
25天前
|
人工智能 自然语言处理 API
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
UI-TARS Desktop 是一款基于视觉语言模型的 GUI 代理应用,支持通过自然语言控制电脑操作,提供跨平台支持、实时反馈和精准的鼠标键盘控制。
508 17
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
|
5月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
423 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
4月前
|
数据挖掘
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
uniapp uview扩展u-picker支持日历期间 年期间 月期间 时分期间组件
219 10
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
564 3
|
6月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
6月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
155 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
313 0
|
5月前
|
JavaScript
从零开始写一套广告组件【一】搭建基础框架并配置UI组件库
其实这个从零有点歧义,因为本质上是要基于`tdesign-vue-next`来进行二次封装为一套广告UI组件库,现在让我们在一起快乐的搭建自己的广告UI库之前,先对以下内容做出共识:
132 0
从零开始写一套广告组件【一】搭建基础框架并配置UI组件库

热门文章

最新文章