今日总结 2025-01-14

1. 学习目标
   • 掌握运用 VSCode 开发 uni - app 的配置流程。
   • 学会将配置完善的项目作为模板上传至 Git，实现复用。
2. 项目启动
   • 创建项目：借助 Vue - Cli 方式创建项目，推荐从国内地址 https://gitee.com/dcloud/uni - preset - vue/repository/archive/vite - ts.zip 下载，完成后即可在 VSCode 中编写代码。
   • .prettierrc 文件：在项目根目录创建该文件，添加 Prettier 常用配置选项，用于规范代码格式，后续可按需完善。
   • VSCode 扩展：介绍了多个针对 uni - app 开发的 VSCode 扩展，如 UNI - HELPER、UNI - CREATEVIEW、UNIAPP 小程序扩展、UNIAPPSNIPPET 等，它们能增强开发体验，但均被用户全局禁用自动更新。
3. 引入 uni - ui 组件库
   • 下包：参考 uni - app 官网 https://uniapp.dcloud.net.cn/component/uniui/quickstart.html#npm%E5%AE%89%E8%A3%85 提供的方法，可通过在 HBuilderX 选 uni - ui 模板、uni_modules 单独安装或 npm 安装等方式获取组件库。
   • 配置 easycom：按照规范配置，实现组件自动导入，简化使用流程。
   • 测试：在 template 中使用 <uni - badge> 组件进行测试，通过设置 text、type、inverted 等属性展示不同样式。
4. 增强使用体验 - 组件库类型提示
   • uni 组件类型校验：
     • 安装依赖：使用 npm i -D @uni - helper/uni - app - types @uni - helper/uni - ui - types 命令安装开发依赖，为项目提供 TypeScript 类型支持。
     • 配置 tsconfig.json：对 tsconfig.json 文件进行配置，继承 @vue/tsconfig/tsconfig.json，设置 compilerOptions 中的 moduleResolution、sourceMap 等选项，添加 @uni - helper/uni - app - types 和 @uni - helper/uni - ui - types 到 types 数组为 uni - ui 组件提供类型支持，在 vueCompilerOptions 中配置 @uni - helper/uni - app - types/volar - plugin 插件，并指定 include 包含的文件类型。

在 uni - app - vscode 版开发过程中，存在以下难点：

1. 项目配置复杂性
   • 多种安装方式的适配：uni - app 项目创建和组件库安装有多种方式，如 Vue - Cli 方式创建项目、HBuilderX 模板选择、uni_modules 安装组件及 npm 安装等。每种方式都有其特定的步骤和注意事项，例如 npm 安装 uni - ui 组件库时，cli 项目需在根目录创建 vue.config.js 文件并配置 transpileDependencies，否则会出现组件无法正常编译和条件编译失效的问题。这就要求开发者熟悉不同安装方式的细节，根据项目实际情况选择合适的方法，并确保配置正确，增加了开发初期的学习成本和操作难度。
   • 相关依赖和工具的版本兼容性：在安装 sass、sass - loader 以及 uni - ui 组件库时，需要注意与项目中 Node 版本的兼容性。如 Node 版本小于 16 时，sass - loader 需使用低于 @11.0.0 的版本，否则不支持 vue@2.6.12；Node 版本大于 16 时，sass - loader 建议使用 v8.x 版本。这种版本依赖关系较为复杂，若开发者不了解或忽视这些兼容性问题，可能会导致安装失败、项目运行出错等情况，影响开发进度。
2. 组件库使用问题
   • easycom 配置的理解与应用：虽然 easycom 技术简化了组件的使用流程，但对于初次接触的开发者来说，理解其配置规则并正确应用仍有一定难度。在 pages.json 文件中配置 easycom 节点时，需要准确设置 autoscan 和 custom 等属性，尤其是 custom 中针对 uni - ui 组件的正则表达式规则 ^uni-(.*) : "@dcloudio/uni - ui/lib/uni - $1/uni - $1.vue"，需要开发者清楚其作用和原理，否则可能导致组件无法自动导入或导入错误，影响项目功能实现。
   • 组件类型校验和类型提示的设置：进行 uni 组件类型校验时，需要安装 @uni - helper/uni - app - types 和 @uni - helper/uni - ui - types 依赖，并在 tsconfig.json 文件中进行详细配置。这涉及到对 TypeScript 配置的深入理解，包括 extends、compilerOptions、vueCompilerOptions 和 include 等多个部分的设置，以及如何确保这些设置与项目中的其他工具和库协同工作。如果配置不当，可能无法获得准确的类型提示和校验，增加代码出现类型错误的风险，降低开发效率。
3. 开发环境整合挑战
   • VSCode 扩展的有效利用：虽然提供了多个针对 uni - app 开发的 VSCode 扩展，但部分扩展被用户全局禁用自动更新，可能存在功能不完善或与当前项目不兼容的情况。开发者需要了解每个扩展的功能和适用场景，如 UNI - HELPER 用于增强开发体验、UNI - CREATEVIEW 方便创建视图与组件等，但如何在实际开发中充分发挥这些扩展的优势，同时避免可能出现的问题，需要开发者进行探索和实践。此外，还需要关注扩展的更新情况，及时更新或调整配置，以适应项目需求和开发环境的变化。
   • 确保项目在不同平台的一致性：uni - app 旨在实现跨端开发，在 VSCode 中开发时需要确保项目在不同平台（如 H5、小程序、App 等）上的一致性。这涉及到处理不同平台的差异，如样式兼容性、API 调用的不同实现等。在使用组件库和编写代码时，需要考虑到这些差异并进行适当的条件编译和适配，否则可能导致项目在某些平台上出现显示异常或功能错误，增加了开发和调试的难度。

原文地址：https://blog.csdn.net/hqy1989/article/details/145141972

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！