uniapp安装uview-plus

绿鸳2025-12-31 8:13

1.在插件市场直接导入uview plus

2.安装npm install sass --save-dev

3.main.js中添加

javascript 复制代码

// #ifdef VUE3
// 这是 Vue3 分支，所有 uview-plus 配置必须写在这里
import { createSSRApp } from 'vue'
import uviewPlus from '@/uni_modules/uview-plus';
import '@/uni_modules/uview-plus/theme.scss'; // 先定义变量
import '@/uni_modules/uview-plus/index.scss'; // 后使用变量
export function createApp() {
  const app = createSSRApp(App)
  // 4. 全局注册 uview-plus（Vue3 必须通过 app.use 注册）
  app.use(uviewPlus)
  return {
    app
  }
}
// #endif

进行到这一步的时候会报错核心问题是SCSS 变量未定义 ，具体表现为代码中引用的 $u-border-color 变量不存在，导致编译失败。

解决方案：

在项目的构建配置文件（如 vite.config.js）中，通过 SCSS 预处理器配置全局引入变量文件（通常是组件库的 theme.scss）

javascript 复制代码

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

export default defineConfig({
  plugins: [uni()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      // 明确 uview-plus 路径，辅助解析
      'uview-plus': path.resolve(__dirname, './node_modules/uview-plus')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 关键：全局注入 theme.scss（必须优先注入，定义变量）
        // 注意：路径要和你 uview-plus 中 theme.scss 的实际位置一致
        // 若 theme.scss 在根目录：写 "uview-plus/theme.scss"
        // 若 theme.scss 在 libs 目录：写 "uview-plus/libs/theme.scss"
        // 若 theme.scss 在 lib 目录：写 "uview-plus/lib/theme.scss"
        additionalData: `@import "uview-plus/theme.scss";`,
        charset: false // 避免编码报错，可选但推荐
      }
    }
  },
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith('up-')
    }
  }
})