【UniApp开发小程序】项目创建+整合UI组件(FirstUI和uView)

创建项目

下图为初始化的项目的文件结构

引入组件

俗话说:"工欲善其事,必先利其器",为了更加方便地开发出页面较为美观的小程序,我们先引入成熟的UI组件,再开始开发之旅。(如果你是前端高手,也可以选择手写样式,冲!!!)

FirstUI

npm安装

首先动动小手打开终端

输入一下命令,安装组件到项目中

配置

在pages.json添加配置,添加了这段配置之后,无需在页面中引入组件,直接使用组件即可。

json 复制代码
"easycom": {
	"autoscan": true,
	"custom": {
		"fui-(.*)": "firstui-uni/firstui/fui-$1/fui-$1.vue"
	}
}

测试

组件生效,引入组件完成

html 复制代码
<fui-button style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>
<fui-button type="success" style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>
<fui-button type="warning" style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>
<fui-button type="danger" style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>
<fui-button type="purple" style="width: 720rpx;margin-top: 10rpx;">你好</fui-button>

引入之后,发现有的组件需要vip,所以我决定换一套UI组件(富哥请直接开通vip,哈哈)

uView

npm安装

复制代码
npm install uview-ui@2.0.36

uView依赖于SCSS,需要通过一下命令安装对sass(scss)的支持

复制代码
// 安装sass
npm i sass -D

// 安装sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

配置

main.js中引入uView的JS库

js 复制代码
import uView from "uview-ui";
Vue.use(uView);

注意:这两行要放在import Vue之后

uni.scss中引入uview的scss文件

复制代码
@import 'uview-ui/theme.scss';

App.vue引入uView基础样式

css 复制代码
<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

pages.json中配置easycom组件模式

配置easycom之后,不需要在页面中import相应的组件,直接使用即可

json 复制代码
"easycom": {
	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},

注意点

  • page.json中只能有一个easycom字段
  • 配置之后,需要重启项目才能生效

测试


组件引入成功,可以愉快地开始开发了

相关推荐
Larry_Yanan19 分钟前
QML学习笔记(四十三)QML与C++交互:上下文属性暴露
c++·笔记·qt·学习·ui·交互
Jing_jing_X2 小时前
微信小程序开发踩坑记:从AI工具翻车到找到合适方案
人工智能·ai·小程序·产品运营·个人开发
一匹电信狗3 小时前
【MySQL】数据库的相关操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
weixin_lynhgworld8 小时前
旧物新生,从二手回收小程序开启绿色生活
小程序·生活·旧物回收
從南走到北9 小时前
智尚招聘求职小程序v1.0.23
微信小程序·小程序
2501_9159184113 小时前
掌握 iOS 26 App 运行状况,多工具协作下的监控策略
android·ios·小程序·https·uni-app·iphone·webview
知识分享小能手14 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
2501_9159090616 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
狂团商城小师妹16 小时前
智尚房产中介小程序
微信小程序·小程序
赵庆明老师17 小时前
Uniapp微信小程序开发:EF Core 中级联删除
uni-app