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
  1. uni.scss引入主题样式
@import '@/uni_modules/uview-plus/theme.scss';
  1. App.vue引入样式
@import "@/uni_modules/uview-plus/index.scss";
  1. page.json配置全局组件模式
"easycom": {
  "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
  1. 大功告成
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
data() {
    return {
      list: [{
        name: '待收货'
      }, {
        name: '待付款'
      }, {
        name: '待评价'
      }],
      current: 0
    }
  }


相关文章
|
1天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
8 0
|
2天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
9 3
|
4天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
14 0
|
4天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
4天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
15 0
|
4天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
20 0
|
4天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
26 0
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
9 1
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
11 0
|
4天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
9 0