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

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


相关文章
|
16天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的软件工程项目管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的软件工程项目管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
41 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
16 3
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
15 3
|
4天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报系统的设计与实现附带文章源码部署视频讲解等
30 12
|
4天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的大学生双创竟赛项目申报与路演管理系统附带文章源码部署视频讲解等
15 1
|
4天前
|
缓存 JavaScript 测试技术
如何创建一个VUE3项目并使用Element UI插件
如何创建一个VUE3项目并使用Element UI插件
|
9天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的移动网赚项目的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的移动网赚项目的详细设计和实现
8 0
|
10天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的家政项目小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的家政项目小程序的详细设计和实现
11 0
基于SpringBoot+Vue+uniapp微信小程序的家政项目小程序的详细设计和实现
|
10天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的项目监管系统附带文章和源代码部署视频讲解等
12 2

热门文章

最新文章