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

引入流程

  1. 导入插件到项目
    vue3引入uview-plus3.0移动组件库-LMLPHP
    项目地址: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"
    },
    
  6. 大功告成

    <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移动组件库-LMLPHP

06-21 11:45