# 卸載舊版本（如存在）
npm uninstall uview-ui

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

# 安裝必要依賴
npm install @uni-helper/uni-network

# 檢查安裝結(jié)果
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";'  // 關(guān)鍵：預(yù)加載 SCSS 變量
      }
    }
  },
  optimizeDeps: {
    include: ['uview-plus']  // 強制預(yù)構(gòu)建
  }
})

<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 中重復(fù)引入 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="動態(tài)加載" 
    @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="標(biāo)簽" 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