最开始接触移动端跨端开发时，纠结过很多框架，最后落地学习uniapp怎么使用，全程都是自己摸索实操，踩了一堆新手常见的低级坑，慢慢摸出了新手最适配的实操流程。

不用跟风装一堆复杂插件，新手开局，只需要搞定基础搭建、运行、简单编码这三步，就能正常用uniapp开发基础项目。

uniapp的环境搭建操作

最开始不懂，直接瞎下载安装包，折腾大半天项目依旧启动失败。后来才反应过来，uniapp官方标配的开发工具是HBuilderX，不是普通的VSCode，这是新手最容易踩的第一个坑。去DCloud官方官网下载正式版HBuilderX，不要选测试版，测试版兼容性差，很容易出现编译报错。

安装完成后不用额外配置环境变量，打开软件直接操作就行。点击新建项目，选择uniapp通用模板，勾选默认的基础组件模板，取消多余的扩展插件，新手插件装多了会直接导致项目卡顿、编译异常。输入项目名称和存储路径，路径尽量不要带中文和空格，确认创建，几十秒就能生成完整的基础项目结构。

这一步很简单。

uniapp的项目运行调试方法

项目创建完成后，文件夹里会自动生成pages、static、App.vue等核心文件，不用手动修改基础配置，直接可以启动运行。顶部菜单栏找到运行选项，里面有多个运行端口，适配不同端的调试需求，这也是uniapp跨端的核心优势。

日常开发最常用的就是浏览器运行和微信小程序模拟器运行。选择运行到Chrome浏览器，软件会自动编译代码，弹出网页预览效果，修改代码后保存，页面会实时刷新，调试前端样式和交互特别方便。如果要开发小程序，需要提前在电脑装好微信开发者工具，开启安全端口，再从HBuilderX运行到小程序模拟器，就能直接预览小程序效果。

之前一直手动刷新页面，浪费超多时间。折腾好久才搞明白，uniapp默认开启热更新，只要保存文件，所有修改都会实时同步，完全不需要重复编译重启项目，大幅提升开发效率。

uniapp的基础编码与打包发布

熟悉运行流程后，就可以开始简单的页面开发，uniapp的语法基本兼容vue2，会vue的人上手几乎零难度。页面编写主要在pages文件夹操作，新建页面文件夹和vue文件，在pages.json里配置页面路径，就能生成新的页面路由，无需复杂配置。

样式方面遵循小程序的rpx适配规则，不用自己写复杂的适配代码，框架会自动适配手机、平板等不同设备屏幕，新手写移动端样式不用再纠结适配问题。静态资源全部放在static文件夹，其他位置存放图片会出现打包失效的问题，这是实操里试出来的硬性规则。

项目开发完成后，直接通过HBuilderX的发行功能打包。可以分别打包成H5网页、微信小程序、APP安装包等不同版本，打包过程软件自动处理依赖和配置，新手只需要选择对应的发行平台，等待编译完成即可，不用配置繁琐的打包参数。

至今写代码新建项目，还是会习惯性取消所有多余插件，只保留基础模板。

晚上收尾完项目，习惯性打开HBuilderX清理了一遍项目冗余文件。