【UniApp开发小程序】项目创建+整合UI组件(FirstUI和uView),www.chinaren.com.cn

文件名：【UniApp开发小程序】项目创建+整合UI组件(FirstUI和uView),www.chinaren.com.cn 【UniApp开发小程序】项目创建+整合UI组件(FirstUI和uView) 创建项目

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

引入组件

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

FirstUI npm安装

首先动动小手打开终端 输入一下命令，安装组件到项目中

配置

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

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

测试 组件生效，引入组件完成

<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)的支持

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

配置 在main.js中引入uView的JS库 import uView from "uview-ui";Vue.use(uView);

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

在uni.scss中引入uview的scss文件 @import 'uview-ui/theme.scss';

在App.vue引入uView基础样式 <style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";</style>

在pages.json中配置easycom组件模式

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

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

注意点：

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

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