vue3引入uview-plus3.0移动组件库

秋叶原的琴音

已于 2023-08-29 10:26:40 修改

阅读量2.1k

点赞数

文章标签： javascript 前端开发语言

于 2023-06-20 18:27:48 首次发布

本文链接：https://blog.csdn.net/qq_27161847/article/details/131313009

版权

文章详细介绍了如何在Vue3项目中引入uview-plus3.0移动组件库，包括从DCloud扩展市场导入插件，通过main.js配置，使用createSSRApp创建应用，引入uni.scss主题样式，App.vue中导入组件样式，以及在page.json配置easycom全局组件。示例代码展示了u-tabs组件的使用和数据绑定。

摘要由CSDN通过智能技术生成

vue3引入uview-plus3.0移动组件库

引入流程

导入插件到项目

项目地址：https://ext.dcloud.net.cn/plugin?name=uview-plus

在main.js引入uview

// main.js
import uviewPlus from '@/uni_modules/uview-plus'

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
    app.use(uviewPlus)
  return { 
    app
  }
}
// #endif

uni.scss引入主题样式

@import '@/uni_modules/uview-plus/theme.scss';

App.vue引入样式

@import "@/uni_modules/uview-plus/index.scss";

page.json配置全局组件模式

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

大功告成

<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>

data() {
		return {
			list: [{
				name: '待收货'
			}, {
				name: '待付款'
			}, {
				name: '待评价'
			}],
			current: 0
		}
	}