今日总结 2025-01-14
- 学习目标
- 掌握运用 VSCode 开发 uni - app 的配置流程。
- 学会将配置完善的项目作为模板上传至 Git，实现复用。
- 项目启动
- 创建项目：借助 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 等，它们能增强开发体验，但均被用户全局禁用自动更新。
- 创建项目：借助 Vue - Cli 方式创建项目，推荐从国内地址
- 引入 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等属性展示不同样式。
- 下包：参考 uni - app 官网
- 增强使用体验 - 组件库类型提示
- 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 组件类型校验：
在 uni - app - vscode 版开发过程中，存在以下难点：
- 项目配置复杂性
- 多种安装方式的适配：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版本。这种版本依赖关系较为复杂，若开发者不了解或忽视这些兼容性问题，可能会导致安装失败、项目运行出错等情况，影响开发进度。
- 多种安装方式的适配：uni - app 项目创建和组件库安装有多种方式，如 Vue - Cli 方式创建项目、HBuilderX 模板选择、uni_modules 安装组件及 npm 安装等。每种方式都有其特定的步骤和注意事项，例如 npm 安装 uni - ui 组件库时，cli 项目需在根目录创建
- 组件库使用问题
- 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等多个部分的设置，以及如何确保这些设置与项目中的其他工具和库协同工作。如果配置不当，可能无法获得准确的类型提示和校验，增加代码出现类型错误的风险，降低开发效率。
- easycom 配置的理解与应用：虽然 easycom 技术简化了组件的使用流程，但对于初次接触的开发者来说，理解其配置规则并正确应用仍有一定难度。在
- 开发环境整合挑战
- VSCode 扩展的有效利用：虽然提供了多个针对 uni - app 开发的 VSCode 扩展，但部分扩展被用户全局禁用自动更新，可能存在功能不完善或与当前项目不兼容的情况。开发者需要了解每个扩展的功能和适用场景，如 UNI - HELPER 用于增强开发体验、UNI - CREATEVIEW 方便创建视图与组件等，但如何在实际开发中充分发挥这些扩展的优势，同时避免可能出现的问题，需要开发者进行探索和实践。此外，还需要关注扩展的更新情况，及时更新或调整配置，以适应项目需求和开发环境的变化。
- 确保项目在不同平台的一致性：uni - app 旨在实现跨端开发，在 VSCode 中开发时需要确保项目在不同平台（如 H5、小程序、App 等）上的一致性。这涉及到处理不同平台的差异，如样式兼容性、API 调用的不同实现等。在使用组件库和编写代码时，需要考虑到这些差异并进行适当的条件编译和适配，否则可能导致项目在某些平台上出现显示异常或功能错误，增加了开发和调试的难度。