uniapp 按需引入uni-ui

### 正确引入 uni-ui 组件库的方法 在 VSCode 中使用 UniApp 开发项目时，可以通过以下方式正确引入 `uni-ui` 组件库： #### 方法一：通过 NPM 安装并配置 EasyCom 1. **安装 `@dcloudio/uni-ui`** 执行命令以安装 `uni-ui` 组件库： ```bash npm install @dcloudio/uni-ui --save ``` 2. **启用 EasyCom 自动导入功能** 修改项目的 `pages.json` 文件，在全局配置中加入如下内容[^5]: ```json { "easycom": { "autoscan": true, "custom": { "^uni-(.*)$": "@dcloudio/uni-ui/lib/uni-$1/uni-$1" } } } ``` 这样可以自动扫描并加载 `uni-ui` 的组件。 3. **直接使用组件** 配置完成后无需额外操作即可直接在模板中使用 `uni-ui` 提供的组件。例如： ```vue <template> <view> <uni-badge text="9"></uni-badge> </view> </template> <script> export default {} </script> ``` --- #### 方法二：手动拷贝组件至项目 如果不想依赖 NPM 或者需要自定义某些组件，则可以选择手动导入的方式： 1. **访问官网下载所需组件** 前往 [UniApp 官网](https://uniapp.dcloud.net.cn/component/) 并找到目标组件（如 `uni-search-bar`），点击“下载&安装”，选择 ZIP 包形式下载[^2]。 2. **解压并复制组件文件** 将下载好的 ZIP 解压缩后，定位到其中的 `components` 文件夹，并将其内容复制到当前项目的 `src/components` 路径下（如果没有该路径，请自行创建）。 3. **注册组件** 在需要使用的 Vue 页面或全局入口处声明组件。例如： ```javascript import UniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'; export default { components: { UniSearchBar } }; ``` 4. **使用组件** 在模板部分可以直接调用已注册的组件名称： ```vue <template> <view> <uni-search-bar></uni-search-bar> </view> </template> ``` --- #### 方法三：脚本内单独引用特定组件 对于仅需少量组件的情况，也可以采用按需加载的形式减少打包体积： 1. **安装 `@dcloudio/uni-ui`** 同样执行以下命令完成安装： ```bash npm install @dcloudio/uni-ui --save ``` 2. **局部引入单个组件** 在页面对应的 `.js/.vue` 文件中显式引入所需的组件[^4]： ```javascript import { uniBadge } from '@dcloudio/uni-ui'; export default { components: { uniBadge }, data() { return {}; } }; ``` 3. **正常渲染组件** 和其他方法一致，只需按照官方文档中的说明书写标签名即可实现效果。 --- ### 注意事项 - 如果遇到嵌套子组件缺失的问题，应参照错误提示逐一补充相应模块。 - 推荐优先选用 Method One 方便快捷且维护成本低；而当网络受限或者特殊需求存在时再考虑后者两种方案之一。

### 如何在 UniApp 中引入和使用 uni-ui 组件库 #### 安装 uni-ui 组件库 为了能够在 UniApp 项目中使用 `uni-ui` 组件库，首先需要通过包管理工具安装该组件库。可以利用 `pnpm` 或者 `npm` 来完成这一步骤。 对于采用 `pnpm` 的情况： ```bash pnpm i @dcloudio/uni-ui ``` 而对于偏好 `npm` 的开发者来说，则执行如下命令[^1]： ```bash npm install @dcloudio/uni-ui --save ``` 另外，在某些情况下还需要额外安装类型声明文件来增强开发体验，特别是当涉及到 TypeScript 开发环境时。此时应运行以下命令以获取必要的类型定义[^2]： ```bash npm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types ``` #### 配置自动导入组件 (EasyCom) 为了让项目能够更方便地识别并加载来自 `uni-ui` 库中的各个组件，建议启用 EasyCom 自动按需加载机制。具体做法是在项目的根目录下的 `pages.json` 文件内加入相应的配置项。这里提供了一个简单的例子说明如何设置此功能： ```json { "easycom": { "autoscan": true, "custom": { "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" } }, "pages": [ ... ], "globalStyle": { ... } } ``` 上述 JSON 片段展示了怎样让系统扫描整个工程寻找匹配模式的组件路径，并将其映射到实际存在的位置上。这样做的好处是可以减少手动注册每一个使用的组件所带来的麻烦[^4]。 #### 处理样式依赖 值得注意的是，如果遇到样式方面的问题，可能是因为缺少了编译 SASS 所必需的一些工具链支持。因此，按照官方文档指示，还需确保已经正确设置了 Sass 及其对应的 Webpack 加载器。可以通过下面这两条指令来进行安装: ```bash npm install sass -D npm install sass-loader -D ``` 至此，完成了所有准备工作之后就可以开始愉快地享受由 `uni-ui` 提供的各种便捷组件啦！