创建项目
下图为初始化的项目的文件结构
引入组件
俗话说:“工欲善其事,必先利其器”,为了更加方便地开发出页面较为美观的小程序,我们先引入成熟的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)的支持
// 安装sass
npm 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字段
- 配置之后,需要重启项目才能生效
测试
组件引入成功,可以愉快地开始开发了