前言

这段时间刚入坑uni-app小程序，本人使用的编辑器是VScode（不是HbuliderX！！！），在此记录本人所踩的坑

关于官方模板

我采用的是官方提供的Vue3+Vite+ts模板，使用的包管理工具是pnpm。大家可以使用npx下载模板

shell 复制代码

$ npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

当然不出意外，大家下载都是失败的 So这里附上官方gitee下载地址点击前去下载

下载解压后运行pnpm i，如果有报错可以尝试切换node版本。

微信小程序开发

第一步注册账号小程序 (qq.com)，按官方所需填写即可。

第二步，登录你的小程序账号，在开发->开发管理->开发设置，获取你的AppID(小程序ID)

第三步，在你的项目工程文件里找到manifest.json中的小程序相关填写你上一步获取的AppID

json 复制代码

 "mp-weixin": {
    "appid": "替换你的小程序ID",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  },

然后终端运行pnpm run dev:mp-weixin 然后会生成一个dist目录，这里存放的是编译成微信小程序的源码

第四步，下载安装微信小程序开发工具微信开发者工具下载地址

第五步，打开并登录微信小程序开发工具，选择导入项目，选择刚刚生成的dist目录下的mp-weixin即可

成功界面如图

关于node版本

让我们来看看人家官方是怎么说的

注意

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0

如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）

HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径

HBuilderX Windows 版本菜单栏工具->设置->运行配置->node路径

当然想要把这个官方模板跑起来还真是不容易（T-T），为什么这么说呢，本人使用node18居然跑不起来，按理说应该是可以的，but我最后选择将node版本降到node16，在前端中我们会经常切换node，小编在这里要强推nvm（一款node版本管理工具），本文不在这里着重介绍，贴心的小编已经为大家附上了nvm的下载地址点击前去下载

关于easycome配置

对于熟悉前端的小伙伴来说，自定义组件是家常便饭啦，uniapp内置easycom，用于自动导入自己和第三方的组件首先我们找到pages.json文件，输入（cv）以下代码

json 复制代码

 "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 规则如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      //自定义规则
      "^Xtx(.*)":"@/components/Xtx$1.vue"
    }
  },

自动查找以uni、Xtx开头的Vue文件，一定要注意规则，否则可能导致导入失败，写完后可以在导入的组件中log一下，判断是否导入成功，配置easycom后无需手动导入组件

关于uni-helper插件

如果你想增加在uni-app中开发体验，你可以选择uni-helper插件，首先确保你在vscode中安装了Vue Language Features (Volar)以及TypeScript Vue Plugin (Volar)插件，这俩插件提供Vue高亮显示和ts语法支持。安装vscode uni-helper相关插件

然后安装3个包

ruby 复制代码

$ pnpm i -D @uni-helper/uni-app-types
$ pnpm i -D @uni-helper/uni-cloud-types
$ pnpm i -D @uni-helper/uni-ui-types

接着在tsconfig.json中将3种类型应用。在compilerOptions的types中添加。配置如下：

json 复制代码

{
    ...
    "compilerOptions": {
       ...
       "types": [
          "@dcloudio/types",
          "@uni-helper/uni-app-types",
          "@uni-helper/uni-ui-types",
          ...
       ],
    }
}

诶，这怎么原生标签报错了呢？别急，出现这个错误是因为unihelp的类型与原生发生了冲突，我们只需要在compilerOptions同级增加以下代码即可解决此问题

json 复制代码

{
    ...
    "compilerOptions": {
       ...
       "types": [
          "@dcloudio/types",
          "@uni-helper/uni-app-types",
          "@uni-helper/uni-ui-types",
          ...
       ],
    }
    //增加vueCompilerOptions配置项
    "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  },
}

避坑热重载

经过小编的测试发现，把微信开发者工具的自动保存和热重载关闭后，居然可以自动同步代码，起因是一天小编正苦于添加了请求拦截器却无法响应，偶然重新编译后发现可以拦截，于是考虑是否代码没更新，一看源码，果然如此，这里不知道是工具的bug还是vscode编译的bug。有了解的小伙伴可以在评论区留一下言。总之就是踩了很多坑（QWQ）

关于我在uni-app中踩的坑

前言

关于官方模板

微信小程序开发

关于node版本

关于easycome配置

关于uni-helper插件

避坑热重载