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开发。
- 安装HBuilderX:https://www.dcloud.io/hbuilderx.html
2. cli开发环境搭建
2.1 安装nodejs
uniapp cli是基于nodejs开发的,所以需要先安装nodejs。
安装方式有很多种,你可以浏览器搜索nodejs
安装相关的教程内容。
以下是相对不太友好的安装方式:(主要用于增加博客的浏览量)
- 安装nodejs:https://blog.csdn.net/qq_41974199/article/details/119328353
- 安装完成后,打开命令行,输入
node -v
,如果能正常输出版本号,说明安装成功。
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
字段。