vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3移动组件库

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

作者:秋叶原的琴音

这篇文章主要介绍了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移动组件库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文