uniapp-ui的使用

### 如何在 UniApp 中全局引入 uni-ui 依赖 要在 UniApp 项目中全局引入 `uni-ui` 组件库，可以通过配置 `pages.json` 文件中的 `easycom` 属性来实现自动按需加载组件的功能。以下是具体的操作方式： #### 配置 easycom 自动扫描 通过设置 `pages.json` 文件中的 `easycom` 字段为 `{ "autoscan": true }` 或者手动指定规则的方式，可以实现在整个项目中无需单独导入即可直接使用 `uni-ui` 提供的组件。 ```json { "easycom": { "autoscan": true, "custom": { "^uni-(.*)$": "@dcloudio/uni-ui/lib/uni-$1/uni-$1" } } } ``` 上述代码片段定义了一个自定义规则，匹配以 `uni-` 开头的所有组件名称，并将其映射到对应的路径下[^3]。 #### 安装 uni-ui 库 确保已经在项目的依赖项中安装了 `@dcloudio/uni-ui` 插件。如果尚未安装，则可以在命令行工具中运行以下 npm 命令完成安装操作： ```bash npm install @dcloudio/uni-ui --save ``` 此步骤将下载并保存所需的 UI 组件包至当前工作目录下的 node_modules 文件夹内[^1]。 #### 使用示例 一旦完成了以上两步设定之后，在任何页面或者组件文件里都可以像下面这样简单书写标签名而不需要额外声明import语句就能正常使用这些控件了: ```html <template> <view class="content"> <!-- 直接调用 uni-button --> <uni-button type="primary">点击按钮</uni-button> <!-- 调用其他任意支持的组件 --> <uni-list> <uni-list-item title="列表项"></uni-list-item> </uni-list> </view> </template> <script> export default { data() { return {}; }, }; </script> ``` 注意这里并没有显式的 import 过程却能够成功渲染出界面元素是因为之前已经做好了全局性的准备工作。