除了使用HBuilderX的可视化界面外,还可以通过cli脚手架来创建和管理uni-app项目。具体来说,可以利用vue-cli工具初始化uni-app工程。
创建uni-app项目
创建项目时,可以选择Vue3或Vue2版本进行开发。
-
创建Vue3项目
- 创建以JavaScript开发的工程。如果命令行创建失败,可以直接从指定链接下载模板。
- 创建以TypeScript开发的工程。如果命令行创建失败,同样可以直接下载对应模板。
-
创建Vue2项目
注意:需要先全局安装vue-cli,命令为
npm install -g @vue/cli。- 使用正式版(对应HBuilderX最新正式版)。
- 使用alpha版(对应HBuilderX最新alpha版)。
创建过程中,对于Vue2项目会提示选择项目模板。初次体验建议选择hello uni-app项目模板。
重要提示
- Vue3/Vite版本要求Node.js版本为18或20及以上。
- 如果使用较低版本的HBuilderX(3.6.7以下)运行基于Vue3/Vite创建的最新cli工程,需要在HBuilderX的运行配置中设置node路径为本机的高版本Node.js路径,并重启HBuilderX生效。
自定义项目模板
选择自定义模板时,需要填写uni-app模板的仓库地址,格式为userName/repositoryName。例如,dcloudio/uni-template-picture即为图片模板。更多下载方式可参考相关插件的文档。
处理国内网络问题
由于项目模板托管在GitHub,国内网络环境可能导致下载失败。可以尝试以下方法解决:
- 更换网络(例如使用4G网络)。
- 在网络设置中增加DNS(如8.8.8.8)。
- 在设备hosts文件中添加固定映射。
更新项目依赖
可以使用@dcloudio/uvm工具来管理uni-app编译器的版本,此工具能自动更新主要依赖。它支持更新到最新正式版、最新Alpha版,或指定的正式版和Alpha版版本。
运行与发布uni-app
通过命令行可以运行和发布到不同平台。%PLATFORM%参数可取值包括:app-plus(App平台)、h5(H5)、mp-weixin(微信小程序)、mp-alipay(支付宝小程序)、mp-baidu(百度小程序)等众多平台。此外,还可以自定义条件编译平台,如钉钉小程序,具体配置参考package.json文档。
快应用开发支持
uni-app支持两种快应用开发方式:类小程序的webview渲染方式和原生渲染方式。从HBuilderX 2.7.12+版本开始支持运行并发布快应用(webview),而HBuilderX 2.7.10+版本支持运行并发布华为快应用(webview)。华为快应用的相关文档可供参考。
其他注意事项
- 使用
npm run build:app-plus会在/dist/build/app-plus目录下生成App打包资源。制作wgt包时,需将该目录下的文件压缩为zip(不包含目录本身),然后重命名为${appid}.wgt,其中appid来自manifest.json文件。 - 开发模式下编译的代码位于
/dist/dev/目录,可用于预览;构建模式下编译的代码位于/dist/build/目录,用于正式发布。 - 两种模式的主要区别:开发模式包含SourceMap便于调试,构建模式则压缩代码以减小体积;环境变量
process.env.NODE_ENV在开发模式下为development,在构建模式下为production。
CLI项目与HBuilderX可视化项目的区别
CLI创建的项目是传统的Node.js项目结构,源代码在src目录,编译器在项目内,编译结果输出到dist目录。而HBuilderX可视化创建的项目采用免Node开发概念,工程代码直接在项目目录下,编译器位于HBuilderX安装目录中,编译结果存放在项目的unpackage目录。
跨IDE开发与协作
CLI创建的项目可以拖入HBuilderX进行编辑,享受HBuilderX针对uni-app的优化,如pages.json跳转提示、manifest可视化配置等。反之,如果希望使用其他IDE开发uni-app,则必须使用CLI模式,因为其他IDE没有内置uni-app编译器。
可视化模式的优势
HBuilderX可视化模式的设计旨在提升易用性和开发效率:
- 降低门槛:避免不熟悉Node或命令行的开发者的学习成本。
- 网络问题:规避npm或GitHub下载失败的风险。
- 统一管理:编译器内置在HBuilderX中,避免每个项目重复安装,节省磁盘空间并简化升级流程。
- 自动处理:预编译器(如Less、SCSS、TypeScript)按需自动安装,确保版本兼容性。
- 操作高效:通过快捷键(如Ctrl+N新建、Ctrl+R运行)快速执行任务,比命令行更便捷。
版本管理与兼容性
CLI项目的编译器安装在项目本地,不会随HBuilderX自动升级,需手动更新依赖。而HBuilderX创建的项目编译器随IDE升级,保持一致。已存在的CLI项目可拖入HBuilderX使用,但注意编译器路径的选择。
开发工具支持
CLI项目内置d.ts文件,可在VS Code、WebStorm等支持TypeScript提示的编辑器中获得语法提示。HBuilderX创建的项目如需在其他编辑器中使用d.ts,可执行npm init后安装@dcloudio/types包。尽管其他编辑器可用,但HBuilderX在uni-app开发效率上具有优势,例如专门的运行调试工具对于App和uniCloud开发必不可少。
综上所述,开发者可根据习惯选择CLI或HBuilderX可视化方式。CLI适合熟悉Node生态、需要多IDE协作的场景;而HBuilderX提供更集成、高效的开发体验,尤其适合快速上手和App开发。无论哪种方式,发布App时仍需使用HBuilderX工具。