uniapp cli开发和HBuilderX开发

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

uniapp的开发方式有两种：

使用哪种方式开发，取决于你的习惯，我个人比较喜欢用cli开发，因为我觉得用命令行开发更加灵活，而且可以使用vscode等编辑器，而不是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开发。

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

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

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

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

shell 复制代码

npm install -g @vue/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

shell 复制代码

npm run dev:h5

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

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