36 回复
根据目前的实际操作，大多数组件包括官方的扩展组件甚至BUTTON组件，在部分情况都会发生跨端异常。
插件市场的产品很多也只支持个别端。
现在都有第三方恐惧症了。
在uni-app的开发中，有多种UI框架和CSS框架可供选择，这些框架能够显著加速开发过程，同时提供丰富的组件和样式支持。以下是一些常用的uni-app UI框架和CSS框架，并附上相关代码案例以供参考。
1. Vant Weapp
Vant Weapp 是有赞前端团队开源的一套轻量、可靠的小程序 UI 组件库，同时也支持uni-app。
安装
npm install @vant/weapp -S --production
使用
在 pages.json 中引入组件：
{
"easycom": {
"autoscan": true,
"custom": {
"^van-(.*)": "@vant/weapp/lib/van-$1/index"
}
}
}
示例代码
<template>
<view>
<van-button type="primary">主要按钮</van-button>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
2. uView UI
uView 是基于uni-app的UI框架，它提供了丰富的组件和API，让开发变得更加简单。
安装
npm install uview-ui -S
引入
在 main.js 中引入：
import Vue from 'vue'
import App from './App'
import uView from 'uview-ui'
Vue.use(uView)
new Vue({
...App
}).$mount()
示例代码
<template>
<view>
<u-button type="primary">主要按钮</u-button>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
3. iView Weapp
iView Weapp 是基于 WeUI 和微信小程序组件化思想开发的一套组件库，同样适用于uni-app。
安装
npm install iview-weapp -S --production
使用
在 pages.json 中引入组件：
{
"easycom": {
"autoscan": true,
"custom": {
"^i-(.*)": "iview-weapp/dist/components/i-$1/i-$1"
}
}
}
示例代码
<template>
<view>
<i-button type="primary">主要按钮</i-button>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
以上这些UI框架和CSS框架都提供了丰富的组件和样式，能够大大简化开发过程。选择哪个框架取决于项目的具体需求和团队的偏好。在实际开发中，可以根据需要灵活配置和使用这些框架。
