uView Plus 快速上手指南

本指南适用于想要在 uni-app（Vue3 + Vite）项目中快速集成 uView Plus UI 组件库的开发者。

内容涵盖：

如何创建 uni-app 项目并安装 uView Plus
详细的配置步骤，包括 pages.json、main.js、App.vue 等
常见组件示例，如图标、按钮等
解决组件不显示、样式不生效等常见问题
最佳实践、推荐工具及 AI 助手的高效使用方式

📌 希望本指南能帮助您更快上手 uView Plus，提升开发效率！

---

一、创建项目

1. 打开 HBuilderX。

2. 点击 文件 -> 新建 -> 项目。

3. 选择 uni-app Vue3/Vite 模板。

4. 输入项目名称并创建。

---

二、安装与配置

1. 安装依赖

在项目根目录下执行以下命令来初始化并安装 uview-plus：

npm init -y

npm install uview-plus

2. 配置 `pages.json`

{

  "easycom": {

    "autoscan": true,

    "custom": {

      "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"

    }

  }

}

3. 配置 `main.js`

import { createSSRApp } from 'vue'

import App from './App'

import uviewPlus from 'uview-plus'



export function createApp() {

  const app = createSSRApp(App)

  app.use(uviewPlus)

  return { app }

}

4. 配置 `App.vue`

<style lang="scss">

/* 引入uView主题样式 */

@import 'uview-plus/index.scss';

</style>

5. 配置 `vite.config.js`

import { defineConfig } from 'vite'

import uni from '@dcloudio/vite-plugin-uni'



export default defineConfig({

  plugins: [uni()],

  css: {

    preprocessorOptions: {

      scss: {

        additionalData: `

          @use "sass:math";

          @import "uview-plus/theme.scss";

        `

      }

    }

  }

})

---

三、组件示例

1. 图标组件

<template>

  <view class="content">

    <u-icon name="edit-pen" size="22" color="#666"></u-icon>

    <u-icon name="checkmark" size="22" color="#666"></u-icon>

  </view>

</template>

2. 按钮组件

<template>

  <view class="button-section">

    <view class="section-title">按钮展示</view>

    <view class="button-list">

      <u-button type="primary" text="确定"></u-button>

      <u-button type="primary" :plain="true" text="镂空"></u-button>

      <u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>

      <u-button type="primary" :disabled="true" text="禁用"></u-button>

      <u-button type="primary" loading loadingText="加载中"></u-button>

      <u-button type="primary" icon="map" text="图标按钮"></u-button>

      <u-button type="primary" shape="circle" text="按钮形状"></u-button>

      <u-button 

        text="渐变色按钮" 

        color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"

      ></u-button>

    </view>

  </view>

</template>

---

四、常见问题

1. 组件不显示

检查 easycom 配置是否正确。
确认 main.js 中是否正确引入了 uview-plus。
检查 scss 配置是否正确。

2. 样式不生效

确保 HBuilderX 安装了 scss/sass 编译插件。
检查 App.vue 中是否正确引入样式。
确认 vite.config.js 配置是否正确。

3. 运行报错

删除 node_modules 文件夹并重新安装依赖。
检查 package.json 中的依赖版本。
确认使用的是 Vue3/Vite 项目。

---

五、注意事项

1. 请确保使用 Vue3/Vite 项目。

2. 组件名称必须以 u- 开头。

3. 使用 setup 语法糖时，注意响应式数据的处理。

4. 样式穿透请使用 :deep()。

5. 注意平台兼容性问题，尤其在不同终端上的表现。

---

六、推荐工具

1. HBuilderX 插件

scss/sass 编译插件
es6 转 es5 插件
prettier 格式化插件

2. 开发工具

---

七、AI助手使用指南

1. 项目初始化提示词

我想创建一个使用 uview-plus 的 uni-app 项目，请帮我：

1. 列出需要安装的依赖

2. 提供必要的配置文件内容

3. 给出基本的项目结构建议

2. 组件使用提示词

请帮我实现以下功能：

1. 使用 uview-plus 的图标组件，展示所有可用图标

2. 添加搜索和复制功能

3. 添加合适的样式

---

关于作者

如果本指南对您有所帮助，欢迎交流和探讨技术问题。

📌 QQ： 313801120

📖 更多文章： www.xiyueta.com/

希望能一起成长，共同探索更多开发技巧！