uniapp + Vue3项目中安装和使用uView Plus的完整配置指南

# 卸载旧版本（如存在）
npm uninstall uview-ui

# 安装 uView Plus
npm install uview-plus@latest

# 安装必要依赖
npm install @uni-helper/uni-network

# 检查安装结果
npm list uview-plus
npm list vue

import { createSSRApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App'
import messages from './locale/index'
import uViewPlus from 'uview-plus'

// i18n 配置 - 注意 legacy: false
const i18n = createI18n({
  legacy: false,  // 必须为 false 以支持 Composition API
  locale: uni.getLocale() || 'zh',
  fallbackLocale: 'zh',
  messages,
  warnHtmlMessage: false
})

export function createApp() {
  const app = createSSRApp(App)
  
  // 先注册 uView Plus
  app.use(uViewPlus)
  
  // 后注册其他插件
  app.use(i18n)
  
  return {
    app
  }
}

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

export default defineConfig({
  plugins: [uni()],
  define: {
    // 解决 vue-i18n 警告
    __VUE_I18N_FULL_INSTALL__: true,
    __VUE_I18N_LEGACY_API__: false,
    __INTLIFY_PROD_DEVTOOLS__: false,
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "uview-plus/theme.scss";'  // 关键：预加载 SCSS 变量
      }
    }
  },
  optimizeDeps: {
    include: ['uview-plus']  // 强制预构建
  }
})

<script setup>
// 可选的全局逻辑
import { onLaunch } from '@dcloudio/uni-app'
onLaunch(() => console.log('App Launch'))
</script>

<template>
  <!-- 保持为空 -->
</template>

<style lang="scss">
/* 正确的引入顺序 */
@import "uview-plus/theme.scss";  /* 1. 变量定义 */
@import "uview-plus/index.scss";  /* 2. 样式文件 */

/* 3. 全局样式 */
page {
  background-color: #f8f8f8;
  font-size: 28rpx;
}

.container {
  padding: 30rpx;
}
</style>

// 可选的全局变量
$primary-color: #2979ff;

// 注意：不要在 uni.scss 中重复引入 uview-plus 样式
// 避免变量冲突

// main.js 中追加
import { UButton, UToast, UIcon, UTag } from 'uview-plus/components'

export function createApp() {
  const app = createSSRApp(App)
  
  app.use(uViewPlus)
  
  // 手动注册确保组件可用
  app.component('u-button', UButton)
  app.component('u-toast', UToast)
  app.component('u-icon', UIcon)
  app.component('u-tag', UTag)
  
  app.use(i18n)
  
  return { app }
}

<template>
  <component 
    v-if="UButton" 
    :is="UButton" 
    type="primary" 
    text="动态加载" 
    @click="handleClick"
  ></component>
</template>

<script setup>
import { ref, onMounted, shallowRef } from 'vue'

const UButton = shallowRef(null)

onMounted(async () => {
  try {
    const components = await import('uview-plus/components')
    UButton.value = components.UButton
  } catch (error) {
    console.error('组件加载失败:', error)
  }
})
</script>

// scss/variables.scss
// 手动定义缺失的变量
$u-border-color: #e4e7ed !default;
$u-type-primary: #2979ff !default;
$u-type-success: #19be6b !default;
// ... 其他变量

<style lang="scss">
/* 1. 自定义变量 */
@import "@/scss/variables.scss";

/* 2. uView Plus 样式 */
@import "uview-plus/theme.scss";
@import "uview-plus/index.scss";
</style>

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <text class="title">uView Plus 测试页面</text>
    
    <u-button 
      type="primary" 
      text="主要按钮" 
      @click="showToast"
    ></u-button>
    
    <u-button 
      type="success" 
      text="成功按钮"
      custom-style="margin-top: 20rpx;"
    ></u-button>
    
    <view class="component-group">
      <u-tag text="标签" type="primary"></u-tag>
      <u-icon name="home" size="28" color="#2979ff"></u-icon>
    </view>
    
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const uToast = ref()

const showToast = () => {
  uToast.value?.show({
    type: 'success',
    message: 'uView Plus 配置成功！',
    duration: 2000
  })
}
</script>

<style scoped>
.container {
  padding: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  text-align: center;
  margin-bottom: 40rpx;
}

.component-group {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
}
</style>

# 完全清理
rm -rf node_modules package-lock.json
npm cache clean --force

# 重新安装
npm install

# 验证安装
npm run dev:mp-weixin