uniapp cli开发和HBuilderX开发

uniapp cli开发和HBuilderX开发

前言

uniapp是一个跨平台的开发框架,可以开发出微信小程序、支付宝小程序、百度小程序、头条小程序、H5、App等,开发者只需要写一套代码,就可以发布到各个平台,大大提高了开发效率。

uniapp的开发方式有两种:

  • HBuilderX开发:可视化,应用工具
  • cli开发:命令行,开发工具

使用哪种方式开发,取决于你的习惯,我个人比较喜欢用cli开发,因为我觉得用命令行开发更加灵活,而且可以使用vscode等编辑器,而不是HBuilderX自带的编辑器。

1. cli开发和HBuilderX开发的区别

cli开发和HBuilderX开发的区别主要在于开发方式不同,HBuilderX开发是可视化的,而cli开发是命令行的。

他们之间可以相互转换,比如你可以用HBuilderX开发,然后用cli打包,也可以用cli开发,然后用HBuilderX打包。

操作步骤如下:

  • cli项目转HBuilderX项目:在HBuilderX中新建uniapp项目,然后把cli项目的src目录复制到HBuilderX项目中,然后在HBuilderX中运行即可。
  • HBuilderX项目转cli项目:通过cli命令创建一个新的项目,然后把HBuilderX项目复制到cli项目中的src目录中,然后在cli中运行即可。

因为HBuilderX开发是可视化的,所以这里主要介绍cli开发。

2. cli开发环境搭建

2.1 安装nodejs

uniapp cli是基于nodejs开发的,所以需要先安装nodejs。

安装方式有很多种,你可以浏览器搜索nodejs安装相关的教程内容。

以下是相对不太友好的安装方式:(主要用于增加博客的浏览量)

2.2 安装 vue-cli

vue-cli是vue的脚手架工具,可以快速创建vue项目。

shell 复制代码
npm install -g @vue/cli
  • 安装完成后,打开命令行,输入vue --version,如果能正常输出版本号,说明安装成功。

2.3 安装 uniapp cli

shell 复制代码
vue create -p dcloudio/uni-preset-vue my-project
shell 复制代码
npm install postcss@latest autoprefixer@latest --save-dev
shell 复制代码
npm install sass --save-dev

2.4 运行项目

shell 复制代码
npm run dev:h5

命令格式:npm run dev:%PLATFORM%

  • %PLATFORM%:平台,比如微信小程序就是dev:mp-weixin,H5就是dev:h5,具体可以查看package.json文件中的scripts字段。

3. 成功

访问:http://localhost:8080/

相关推荐
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮1 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw51 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !1 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq2 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app