uView Plus 快速上手指南

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. 开发工具

• Vue Devtools
• uniapp 官方文档
• uView Plus 文档

---

七、AI助手使用指南

1. 项目初始化提示词

我想创建一个使用 uview-plus 的 uni-app 项目，请帮我：
1. 列出需要安装的依赖
2. 提供必要的配置文件内容
3. 给出基本的项目结构建议

2. 组件使用提示词

请帮我实现以下功能：
1. 使用 uview-plus 的图标组件，展示所有可用图标
2. 添加搜索和复制功能
3. 添加合适的样式

---

关于作者

如果本指南对您有所帮助，欢迎交流和探讨技术问题。
📌 QQ： 313801120
📖 更多文章： www.xiyueta.com/
希望能一起成长，共同探索更多开发技巧！