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

 更新时间:2023年06月21日 11:48:49   作者:秋叶原的琴音  
这篇文章主要介绍了vue3引入uview-plus3.0移动组件库的流程,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

引入流程

1.导入插件到项目

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

2.在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

3.uni.scss引入主题样式

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

4.App.vue引入样式

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

5.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
		}
	}

到此这篇关于vue3引入uview-plus3.0移动组件库的文章就介绍到这了,更多相关vue3移动组件库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 最基础的vue.js双向绑定操作

    最基础的vue.js双向绑定操作

    这篇文章主要为大家详细介绍了最基础的vue.js双向绑定操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue3实现瀑布流的2种核心方案

    Vue3实现瀑布流的2种核心方案

    这篇文章主要介绍了Vue3中实现瀑布流的两种主要方案:CSS原生方案和JS计算方案,CSS方案适用于静态短列表,而JS方案适用于长列表和复杂布局,能够保证排序正常并支持懒加载,文章详细介绍了两种方案的实现步骤,需要的朋友可以参考下
    2025-12-12
  • Vue.js实现立体计算器

    Vue.js实现立体计算器

    这篇文章主要为大家详细介绍了Vue.js实现立体计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • Echarts之图例legend基本配置方式

    Echarts之图例legend基本配置方式

    这篇文章主要介绍了Echarts只图例legend基本配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue 基于element-ui 分页组件封装的实例代码

    vue 基于element-ui 分页组件封装的实例代码

    这篇文章主要介绍了vue 基于element-ui 分页组件封装的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • Vue实现路由跳转至外界页面

    Vue实现路由跳转至外界页面

    这篇文章主要介绍了Vue实现路由跳转至外界页面方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 使用vue3实现数据漏斗图

    使用vue3实现数据漏斗图

    漏斗图一般会借助一些第三方的库来实现,这些库使用起来虽然简单顺手,但是如果要定制样式就会不太方便,本文我们就来用vue3手撸一个漏斗图吧
    2024-11-11
  • Vue3使用vuedraggable实现拖拽排序功能实例代码

    Vue3使用vuedraggable实现拖拽排序功能实例代码

    vuedraggable是一个基于Sortable.js的Vue.js拖拽排序插件,提供简单、灵活且强大的拖拽功能,支持Vue2和Vue3,这篇文章主要介绍了Vue3使用vuedraggable实现拖拽排序功能的相关资料,需要的朋友可以参考下
    2026-02-02
  • Vue3+Element-Plus使用Table预览图片发生元素遮挡的解决方法

    Vue3+Element-Plus使用Table预览图片发生元素遮挡的解决方法

    这篇文章主要介绍了Vue3+Element-Plus使用Table预览图片发生元素遮挡的问题分析和解决方法,文中通过代码示例讲解的非常详细,对大家解决问题有一定的帮助,需要的朋友可以参考下
    2024-04-04
  • Vue 监听列表item渲染事件方法

    Vue 监听列表item渲染事件方法

    今天小编就为大家分享一篇Vue 监听列表item渲染事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论