在uni-app中引入uView具体操作流程和示例

方式一：通过 npm 安装（推荐）

步骤 1：创建 uni-app 项目（如已有项目可跳过）：

# 全局安装 vue-cli（如已安装可跳过）
npm install -g @vue/cli

# 创建 uni-app 项目
vue create -p dcloudio/uni-preset-vue my-project

# 或使用 npx 直接创建
npx degit dcloudio/uni-preset-vue#vite my-project

步骤 2：安装 uView：

# 进入项目目录
cd my-project

# 安装 uView 2.0 版本（Vue3/Vite 推荐）
npm install uview-plus

# 或安装 uView 1.x 版本（Vue2）
npm install uview-ui

版本选择：

– `uview-plus`：适配 Vue3 + Vite，uni-app 3.0+ 推荐

– `uview-ui`：适配 Vue2，uni-app 2.0 使用

步骤 3：配置引入：

3.1 配置 main.js

// main.js
import { createSSRApp } from 'vue'
import App from './App.vue'

// 引入 uView
import uviewPlus from 'uview-plus'

export function createApp() {
  const app = createSSRApp(App)
  
  // 使用 uView
  app.use(uviewPlus)
  
  return {
    app
  }
}

3.2 配置 uni.scss

/* uni.scss */
/* 引入 uView 主题样式 */
@import 'uview-plus/theme.scss';

3.3 配置 pages.json（easycom 模式）

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
      "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
      "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
    }
  },
  "pages": [
    // 你的页面配置
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

3.4 配置 vite.config.js（Vue3/Vite 项目）

// vite.config.js
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    uni()
  ],
  resolve: {
    alias: {
      'uview-plus': resolve(__dirname, 'node_modules/uview-plus')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/uni.scss";`
      }
    }
  }
})

步骤 4：使用示例：

<template>
  <view class="container">
    <!-- 按钮组件 -->
    <u-button type="primary" text="主要按钮" @click="handleClick"></u-button>
    
    <!-- 输入框组件 -->
    <u-input
      v-model="value"
      placeholder="请输入内容"
      border="surround"
    ></u-input>
    
    <!-- 标签组件 -->
    <u-tag text="标签" type="success"></u-tag>
    
    <!-- 弹窗组件 -->
    <u-popup :show="show" @close="show = false">
      <view class="popup-content">这是一个弹窗</view>
    </u-popup>
  </view>
</template>

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

const value = ref('')
const show = ref(false)

const handleClick = () => {
  uni.showToast({
    title: '点击了按钮',
    icon: 'none'
  })
  show.value = true
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  
  .popup-content {
    padding: 40rpx;
    text-align: center;
  }
}
</style>

方式二：通过插件市场安装（DCloud 插件市场）

步骤 1：访问插件市场：

打开 [DCloud 插件市场](https://ext.dcloud.net.cn/)，搜索 “uView” 或 “uview-plus”。

步骤 2：导入插件：

1. 找到 uView 2.0 或 uview-plus 官方插件

2. 点击 “使用 HBuilderX 导入插件” 或 “下载插件 ZIP”

方式 A：HBuilderX 一键导入（推荐）：

# 在 HBuilderX 中
# 1. 点击插件详情页的 "导入" 按钮
# 2. 选择要导入的项目
# 3. 等待自动下载并安装

方式 B：手动下载 ZIP

1. 下载插件 ZIP 包

2. 解压到项目根目录下的 `uni_modules` 文件夹

3. 目录结构如下：

my-project/
├── uni_modules/
│   └── uview-plus/          # uView 插件目录
│       ├── components/      # 组件库
│       ├── libs/           # 工具库
│       ├── theme.scss      # 主题样式
│       └── ...
├── pages/
├── App.vue
└── main.js

步骤 3：配置引入：

3.1 配置 main.js

// main.js
import { createSSRApp } from 'vue'
import App from './App.vue'

// 引入 uView（uni_modules 模式）
import uviewPlus from '@/uni_modules/uview-plus'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uviewPlus)
  
  return { app }
}

3.2 配置 uni.scss

/* uni.scss */
/* 引入 uView 主题 */
@import '@/uni_modules/uview-plus/theme.scss';

3.3 配置 pages.json

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
      "^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
      "^u-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
    }
  },
  "pages": []
}

步骤 4：使用示例（与 npm 方式相同）：

<template>
  <view class="box">
    <u-button type="success" icon="checkmark-circle" text="成功按钮"></u-button>
    <u-icon name="photo" size="28" color="#2979ff"></u-icon>
    <u-cell-group>
      <u-cell title="单元格" value="内容"></u-cell>
    </u-cell-group>
  </view>
</template>

uni-app开发文档：一个基于Vue.js的跨平台应用开发框架

uView UI官网：一个全面兼容nvue的uni-app生态框架

一款基于Vue3与TS加持的开源移动端UI组件库——Wot Design Uni

Thor UI移动端UI组件库中文文档官网介绍

如何利用uni-app获取微信步数（附代码）

标签： uni-app, uView

上面是“在uni-app中引入uView具体操作流程和示例”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_30863.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！