uniapp+vue3+uview来开发我们的项目

前言：

        就像我们vue的web的框架element、iview等一样，我们的uni-app开发也有适合的他的框架，除了他本身的扩展组件以外，第三方好用的就是就是uview了。

实现效果：

官网信息：

vue2版本：uview-ui

Image 图片 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架uView UI，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://uviewui.com/components/image.html

vue3版本：uview-plus

安装unocss | uview-plus - 全面兼容nvue/鸿蒙/uni-app-x的uni-app生态框架 - uni-app UI框架uview-plus，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水https://uiadmin.net/uview-plus/components/unocss.html

具体使用：

vue2：

1、安装

npm install uview-ui@2.0.38

2、main.js中配置

// main.js，注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)


// 如此配置即可
uni.$u.config.unit = 'rpx'




// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
// 需要在Vue.use(uView)之后执行
uni.$u.setConfig({
	// 修改$u.config对象的属性
	config: {
		// 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
		unit: 'rpx'
	},
	// 修改$u.props对象的属性
	props: {
		// 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
		radio: {
			size: 15
		}
		// 其他组件属性配置
		// ......
	}
})

3、具体使用，带个u就可以了

<template>
	<view>
		<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
		<u-button @click="show = true">打开ActionSheet</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'标题',
			list: [
				{
					name:'选项一',
					subname:"选项一描述",
					color:'#ffaa7f',
					fontSize:'20'
				},
				{
					name: '选项二禁用',
					disabled:true
				},
				{
					name: '开启load加载', //开启后文字不显示
					loading:true
				}
			],
			show: false
		};
	}
};
</script>

vue3：

1、安装，

注意，这里对sass有很严格的版本要求

npm install uview-plus

sass版本要求

"sass": "1.63.2",
"sass-loader": "10.4.1",

sass安装命令
# 注意：sass-loader 版本需兼容，推荐使用 v10.x

npm install sass sass-loader@10 --save-dev

2、在 main.js 或 main.ts 中配置

import { createSSRApp } from 'vue'

import uviewPlus from 'uview-plus' //uni-app创建的vue3项目的话，加这两句

export function createApp() {
  const app = createSSRApp(App)

  app.use(uviewPlus) //uni-app创建的vue3项目的话，加这两句

  return { app }
}

3、App.vue中的style样式中添加

<style lang="scss">
  @import "uview-plus/index.scss"; //添加这个
</style>

4、uni.scss 文件中添加

@import "uview-plus/theme.scss";

5、 配置 easycom 自动引入组件，这个很重要

注意：

        因为我们如果之前用过vue2+uview开发会发现，我们的标签都是 u-  的标签，但是我们uview-plus 都是  up- 开头的标签，这里添加是为了让二者指向一直，解决我们部分标签查找不对的问题，比如：我们使用button/popup等标签，他就是指向u-button内容，所以要把两个指向都更改到我们新安装的包

"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
		    "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"
		}
	}

6、（非必须）如果需要ts支持，新建一个 tsconfig.json文件，添加下面内容就行了

在 tsconfig.json 中添加类型声明：

{
  "compilerOptions": {
    "types": ["uview-plus/global"]
  }
}

7、使用

如果你也想不用手动引入ref等信息，请点我

<template>
	 <up-box height="160px" gap="12px" :bgColors="['#EEFCFF', '#FCF8FF', '#FDF8F2']">
		<template #left>
			左
		</template>
		<template #rightTop>
			右上
		</template>
		<template #rightBottom>
			右下
		</template>
	</up-box>
	<view>
		<up-select v-model="cateId" label="分类"
			:options="cateList" @select="selectItem"></up-select>
	</view>
	<view>
		<up-calendar :show="show"></up-calendar>
		<up-button @click="show = !show">打开/关闭</up-button>
	</view>
</template>

<script setup>
//这里根据你的配置来，如果没有自动导入的，就手动加上ref的引入
let show = ref(false)
const cateId = ref('')
const cateList = ref([
    {
        id: '1',
        name: '分类1'
    },
    {
        id: '2',
        name: '分类2'
    },
    {
        id: '3',
        name: '分类4'
    },
])
  
// 方法  
const selectItem = (item) => {  
  console.log(item);  
};  
</script>

<style>
	       
</style>