vue3使用uView与uv-ui的详细步骤

# 安装 uView Plus
npm install uview-plus
# 如果是 Vue3 + TS 项目，还需安装类型声明
npm install -D @types/uview-plus

import { createSSRApp } from 'vue'
import uviewPlus from 'uview-plus'
export function createApp() {
  const app = createSSRApp(App)
  // 全局注册 uView Plus
  app.use(uviewPlus)
  return {
    app
  }
}

<style lang="scss">
/* 引入 uView Plus 全局样式 */
@import "uview-plus/index.scss";
/* 你的自定义样式 */
page {
  background-color: #f5f5f5;
}
</style>

/* 引入 uView Plus 全局变量 */
@import "uview-plus/theme.scss";

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import path from 'path'
export default defineConfig({
  plugins: [uni()],
  resolve: {
    alias: {
      // 配置 uView Plus 路径别名
      'uview-plus': path.resolve(__dirname, 'node_modules/uview-plus')
    }
  }
})

<template>
  <view class="container">
    <!-- uView 按钮组件 -->
    <u-button type="primary" @click="handleClick">主要按钮</u-button>
    <u-button type="warning" size="mini">小型警告按钮</u-button>
    <!-- uView 输入框组件 -->
    <u-input 
      v-model="inputValue" 
      placeholder="请输入内容" 
      border="surround"
      clearable
    ></u-input>
    <!-- uView 弹窗组件 -->
    <u-modal 
      v-model="showModal" 
      title="提示" 
      content="这是 uView 的弹窗组件"
      confirm-text="确定"
      cancel-text="取消"
    ></u-modal>
  </view>
</template>
<script setup>
import { ref } from 'vue'
// 响应式数据
const inputValue = ref('')
const showModal = ref(false)
// 按钮点击事件
const handleClick = () => {
  showModal.value = true
}
</script>
<style scoped>
.container {
  padding: 20rpx;
}
</style>

/* 覆盖 uView 主色调 */
$u-primary: #007aff;
/* 覆盖警告色 */
$u-warning: #ff9500;
/* 覆盖边框颜色 */
$u-border-color: #e5e5e5;

{
  "types": ["uview-plus"]
}

# 安装 uv-ui 核心包
npm install uv-ui

# 安装 SCSS 依赖（若未安装）
npm install sass sass-loader@10 -D

import { createSSRApp } from 'vue'
import App from './App.vue'
// 引入 uv-ui 核心库
import uvUi from 'uv-ui'
// 引入 uv-ui 全局样式
import 'uv-ui/style/index.scss'
export function createApp() {
  const app = createSSRApp(App)
  // 全局注册 uv-ui
  app.use(uvUi)
  return {
    app
  }
}

import { createSSRApp } from 'vue'
import App from './App.vue'
// 只引入需要的组件（示例：按钮、输入框）
import { uvButton, uvInput } from 'uv-ui'
// 引入对应组件样式
import 'uv-ui/style/uv-button.scss'
import 'uv-ui/style/uv-input.scss'
export function createApp() {
  const app = createSSRApp(App)
  // 注册单个组件
  app.component('uv-button', uvButton)
  app.component('uv-input', uvInput)
  return {
    app
  }
}

<style lang="scss">
/* 若按需引入，需手动引入基础样式 */
@import "uv-ui/style/base.scss";
/* 自定义全局样式 */
page {
  background-color: #f8f8f8;
  font-size: 28rpx;
}
</style>`在这里插入代码片`

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import path from 'path'
export default defineConfig({
  plugins: [uni()],
  resolve: {
    alias: {
      // 配置 uv-ui 路径别名
      'uv-ui': path.resolve(__dirname, 'node_modules/uv-ui')
    }
  }
})

<template>
  <view class="container">
    <!-- 1. 按钮组件 -->
    <uv-button 
      type="primary" 
      size="normal" 
      @click="openToast"
      icon="search"
    >
      主要按钮
    </uv-button>
    <uv-button type="danger" plain>镂空危险按钮</uv-button>
    <!-- 2. 输入框组件 -->
    <uv-input 
      v-model="inputValue" 
      placeholder="请输入内容" 
      clearable 
      border="bottom"
      @change="handleInputChange"
    ></uv-input>
    <!-- 3. 提示框组件 -->
    <uv-toast ref="toastRef" />
    <!-- 4. 弹窗组件 -->
    <uv-popup 
      v-model="showPopup" 
      position="center"
      title="提示"
    >
      <view class="popup-content">
        <text>这是 uv-ui 的弹窗内容</text>
        <uv-button type="primary" @click="showPopup = false">确定</uv-button>
      </view>
    </uv-popup>
  </view>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
// 响应式数据
const inputValue = ref('')
const showPopup = ref(false)
// 获取 toast 实例
const toastRef = ref(null)
const { proxy } = getCurrentInstance()
// 按钮点击：显示提示框
const openToast = () => {
  proxy.$uv.toast({
    title: '操作成功',
    type: 'success',
    duration: 2000
  })
  // 也可通过 ref 调用
  // toastRef.value.show({ title: '操作成功' })
}
// 输入框变化事件
const handleInputChange = (val) => {
  console.log('输入内容：', val)
}
</script>
<style scoped lang="scss">
.container {
  padding: 20rpx;
  gap: 20rpx;
  display: flex;
  flex-direction: column;
}
.popup-content {
  padding: 30rpx;
  text-align: center;
  gap: 20rpx;
  display: flex;
  flex-direction: column;
}
</style>

// 覆盖主色调
$uv-primary-color: #007aff;
// 覆盖危险色
$uv-danger-color: #ff3b30;
// 覆盖边框颜色
$uv-border-color: #e5e5e5;
// 覆盖字体主色
$uv-text-color: #333333;

<style lang="scss">
@import "./styles/uv-variables.scss";
@import "uv-ui/style/index.scss"; // 完整引入时用
// @import "uv-ui/style/base.scss"; // 按需引入时用
</style>

declare module 'uv-ui' {
  const uvUi: any;
  export default uvUi;
  export const uvButton: any;
  export const uvInput: any;
}