uView Pro

主题

微信扫描二维码，关注我
0
赞助位
FinClip

无需重构，一次开发多端运行！

Harmony
成为赞助商

配置 ​

uView Pro 支持 npm 和 uni_modules 两种主流安装方式，配置方式高度一致。无论采用哪种方式，均可通过 easycom 实现组件自动引入，极大提升开发效率。以下为统一的配置说明：

提示

确保你已经安装了 uView Pro，详见安装文档：uView Pro 安装

1. 引入 uView Pro 主库 ​

在 main.ts 中引入并注册 uView Pro：

js
import { createSSRApp } from 'vue'
import uViewPro from 'uview-pro'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uViewPro)
  return {
    app
  }
}
js
import { createSSRApp } from 'vue'
import uViewPro from "@/uni_modules/uview-pro";

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

2. 引入全局样式 ​

在 uni.scss 中引入主题样式：

scss
@import 'uview-pro/theme.scss';
scss
@import "@/uni_modules/uview-pro/theme.scss";

在 App.vue 首行引入基础样式：

scss
 @import "uview-pro/index.scss";
scss
@import "@/uni_modules/uview-pro/index.scss";

3. 配置自动引入组件 ​

有两种方案可自动引入组件：

  • 基于 easycom 配置自动引入组件
  • 基于 vite 配置自动引入组件

方案一：基于 easycom 配置自动引入组件 ​

在 pages.json 中配置 easycom 规则，实现组件自动引入：

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

注意

  • 1.修改 easycom 规则后需重启 HX 或重新编译项目。
  • 2.请确保 pages.json 中只有一个 easycom 字段，否则请自行合并多个规则。
  • 3.一定要放在 custom 内，否则无效。

方案二：基于 vite 配置自动引入组件 ​

如果不想用 easycom，也可以通过 @uni-helper/vite-plugin-uni-components 实现组件的自动引入。

提醒

  • 必须使用 @uni-helper/vite-plugin-uni-components@0.2.3 及以上版本，因为在 0.2.3 版本开始其内置了 uView Pro 的 resolver，并支持了 npm、uni_modules 方式引入。
  • 如果使用此方案时控制台打印很多 Sourcemap for points to missing source files​ ，可以尝试将 Vite 版本升级至 4.5.x 以上版本。
bash
npm i @uni-helper/vite-plugin-uni-components -D
bash
yarn add @uni-helper/vite-plugin-uni-components -D
bash
pnpm add @uni-helper/vite-plugin-uni-components -D

配置 vite.config.ts

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

import Components from '@uni-helper/vite-plugin-uni-components'
import { uViewProResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'

export default defineConfig({
  plugins: [
    // make sure put it before `Uni()`
    Components({
      resolvers: [uViewProResolver()]
    }),
    uni()
  ]
})
js
// vite.config.ts
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

import Components from '@uni-helper/vite-plugin-uni-components'
import { uViewProResolver } from '@uni-helper/vite-plugin-uni-components/resolvers'

export default defineConfig({
  plugins: [
    // make sure put it before `Uni()`
    Components({
      resolvers: [uViewProResolver('@/uni_modules/uview-pro')]
    }),
    uni()
  ]
})

提醒

uni_modules 配置方式：如果使用了 @ 符，务必配置别名 @ 到根目录！

如果你使用 pnpm ，请在根目录下创建一个 .npmrc 文件，参见 Issue。

text
// .npmrc
public-hoist-pattern[]=@vue*
// or
// shamefully-hoist = true

4. Volar 类型提示支持 ​

如需在 CLI 项目中获得 Volar 的全局类型提示，请在 tsconfig.json 中添加：

json
{
  "compilerOptions": {
    // npm 方式
    "types": ["uview-pro/types"]
    // uni_modules 方式
    // "types": ["@/uni_modules/uview-pro/types"]
  }
}

HBuilderX 项目暂不支持 tsconfig.json 的 types 配置，CLI 项目推荐配置以获得最佳 TS 体验。

5. 组件使用 ​

配置完成后，无需 import 和 components 注册，可直接在 SFC 中使用 uView Pro 组件：

vue
<template>
  <u-button type="primary">按钮</u-button>
</template>