本系列教程，以——中二少年工具箱——小程序为案例demo，具体效果请在微信中搜索该小程序查看。或在微信输入框输入 ——#小程序://中二少年工具箱/6buitXgPnjHV21r
前言
本文主要介绍如何通过webstorm开发uniapp小程序项目。
编译器是我们开发代码的主要工具，它不仅提供了编写、显示代码的功能，还提供了环境搭建、方法跳转、语法提示等多种强大功能，一个编译器使用是否顺手，直接影响我们开发项目的效率。
目前市场最流行的两大前端编译器是webstorm和vscode，两者各有千秋。而uniapp官方推荐的编译器是自家的HbuilderX，HbuilderX在编译运行uniapp方面确实更方便，但它其它功能与webstorm和vscode还是有一定差距。
我已经习惯了webstorm，所以本文以webstorm为例，介绍如何在webstorm中开发uniapp项目。
一、使用vue脚手架创建项目
全局安装编译脚手架：
npm install -g @vue/cli
创建uniapp项目（vue3/vite版）：
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
我们可以在文件系统重找到这个my-vue3-project项目：
通过webstorm打开此项目，首次进入项目，编译器会提示更新项目，如果未提示，我们运行命令手动更新：
npm install
我们这次选择手动更新的依赖，将右下角的提示关掉即可。
二、运行项目
项目更新完毕后，我们需要运行项目。
首先查看package.json中的配置：
这里有很多的启动命令，其中dev:my-weixin是微信小程序的启动命令。我们在终端中输入启动命令：
npm run dev:mp-weixin
发现提示：项目运行已经完成，但是需要打开微信开发者工具，在其中导入dist\dev\mp-weixin才能运行。
我们打开项目的dist目录，发现确实存在mp-weixin文件夹：
出现上面文件夹，说明我们项目运行没有问题。
根据提示，打开微信开发者工具，点击下面的+号导入上面的mp-weixin文件夹：
根据微信开发者工具的提示维护信息即可：
如果使用了微信云开发，则选择微信云开发，如果小程序没有后端或者有自己的服务器，则选择不适用云服务。
导入项目后，如果页面空白，没有内容，则webstorm里重新运行项目，微信开发者工具里也重新编译项目。
最终会出现：
在webstorm中修改代码，将hello修改为其他内容：
重新查看微信开发者工具，发现内容已经改变:
三、旧项目迁移
首先我的旧项目是基于vue3开发的，如果基于vue2，需要到官网查看vue2对应的脚手架工具，只是下载的工具有差别，具体步骤和上面雷同。
打开旧项目，我的项目目录如下：
使用上面的步骤，创建对应的新项目,新项目目录如下:
将旧项目中有用的部分复制粘贴到新项目里，如果两者冲突，大部分都用旧项目覆盖新项目，比如app.vue等。
package.json需要将新旧项目合并到一起，建议将旧项目中的配置信息复制到新项目package.json中，形成新的package.json。
因为上面已经运行过项目，所以可能已经产生了dist目录，如果将新旧项目合并后，务必要先删除。
对比新旧项目的文件路径，按照新的项目路径规则，将旧项目跟目录下的：App.vue,main.js,manifest.json，pages.json,uni.scss放到新项目的src目录下，重新运行项目。
四、解决新旧项目的兼容性问题
4.1直接运行可能会报错： Cannot find module 'pinia\dist\pinia.mjs' Require stack。
这是因为以前是用hbuilderx运行项目，hbuilderx中内置了pinia库，新的项目需要重新更新pinia，以下是官网的介绍：
现在肯定已经是4.14之后，所以执行：
yarn add pinia
或者
npm install pinia
遇到其他的库，例如lodash、sass等，依照此方法解决。
4.2 可能会报错： Cannot find module 'F:/myProject/lize-tools/lize-tool-v3/src/common/share.js' from 'F:/myProject/lize-tools/lize-tool-v3/src/main.js'
这是因为原来项目的@和新项目的@代表的绝对路径不一样了，在旧项目中，或许是因为hbuilderx内置了打包工具的配置，也许是因为没有src目录，@默认代表项目根目录，而新项目中@代表的是src目录。
我们将common目录整体移入src中后，报错问题解决。
根目录中其他文件夹按照相对的路径，同样移入src中。例如uni_modules、pages等文件夹。
4.3运行报错TypeError: common_vendor.initVueI18n is not a function
这是uni-i18n库报错，我的项目里虽然没有使用国际化语言插件，但是某些uni内置的组件默认使用了。如下：
可以看到，popup、calendar等组件里都使用了该插件。我们可以看到该插件引入的语法是：
import {
initVueI18n
} from '@dcloudio/uni-i18n'
很明显，引入的是一个隶属于@dcloudio组织的插件，这是标准的npm库格式，所以我们去npm官网查询一下，果然，npm上存在该库。我们下载即可：
npm i @dcloudio/uni-i18n
4.4 报错Failed to load local image resource /pages/index/1,0,0 the server responded with a status of 500
这明显是图片引入时，找不到资源路径导致的，我们查看微信开发者工具，会发现首页显示异常，那么首页上肯定是有图片资源加载出现问题，找到对应代码：
<image style="width: 76px; height: 76px" :src="titleImgSrc"></image>
const titleImgSrc = ref('/static/img/title.svg');
上面是相关代码，我们项目里根目录已经没有static文件夹，所以可以有两种修改方案：
-
const titleImgSrc = ref('/src/static/img/title.svg');将绝对路径前加上src；
-
通过import静态引入资源，然后赋值：
import titleImg from '@/static/img/title.svg'
const titleImgSrc = ref(titleImg);
五、推荐一个好用的uniapp插件——Uniapp Tool
如果直接在webstorm中开发uniapp，pages.json是这样的：
因为webstorm并不了解uniapp语法，在普通的json文件中，是不允许出现注释的。而如果安装Uniapp Tool插件后，上面的代码变成下面这样：
安装插件，打开文件-设置-插件，在插件市场搜索Uniapp，直接安装即可。
安装成功后，需要配置插件：
在设置-工具-UniApp中，配置Hbuilderx和微信开发者工具的安装目录（根目录）。如果需要重启，根据插件提示重启webstorm即可。
六、开发小技巧——便捷运行项目
我们平时习惯通过npm或者yarn命令启动项目，平时命令比较简单时，这样操作并没有什么问题，但是uniapp可以运行到各家小程序，命令也不是简单的dev和build，这时如果每次启动都敲命令，挺烦人的。
所以我们将命令维护到右上角的项目启动快捷方式。打开编辑配置如图：
然后点击+号创建新命令，选择npm：
然后填写名称和脚本命令：
这样当我们每次以调试模式运行时，就相当于在终端输入“npm run dev:mp-weixin”：
其他的前端项目也都可以这样配置。
打开微信小程序开发工具，发现一切运行正常，至此，我们就完成了从hbx到webstorm迁移项目并运行的全部工作，完结，撒花！
总结
本文虽然没有什么难度，但是迁移过程中，遇到的都是一些琐碎的小知识点，文章共5000+字，如果对您有帮助，建议最好是收藏一下。
已经有大半年不怎么写代码了，新年伊始，趁时间宽裕，博主会尽快整理更多实用原创文章。最后欢迎大家关注博主小程序——中二少年工具箱
