【从0开始学前端】从0搭建uni-app小程序脚手架

uni-app 支持两种方式创建项目：

1.通过 HBuilderX 创建（需安装 HBuilderX 编辑器）

2.通过命令行创建（需安装 NodeJS 环境）

1.HBuilderX

该软件从官方网站下载，配合微信开发者工具共同使用。点击蓝色字体跳转官网下载。

下载后，需要配置相关内容。打开HBuilderX先新建文件，选择vue3默认版本。

配置

新建文件后，HBuilderX使用的是vue3语言，需要下载相对应编译器，但是在最新版本中第一次运行会自动下载，可能会出现权限不够的状态，只需要用管理员权限重新打开HBuilderX即可。

首先，配置微信开发者工具路径。在HBuilderX中点击工具=>配置=>运行配置翻到底部，配置微信开发者工具路径。打开微信开发者工具端口后关闭。

配置好相关内容后，即可运行默认代码。此时会自动打开微信助手进行编译。为了方便观察小程序的变化，可以点击右下角分页键将小程序页面分离。再打开manifest.json添加appid

再打开HBuilderX发现，其代码与vue一致，可以更改相关内容进行测试。

项目目录

在了解项目结构后，就可以进行小程序的编写啦！

案例：在观察语法后，发现与vue相同，可以用vue的语法进行编写。无论是渐进式还是组合式都可以使用。

2.命令行（不必依赖HBuilderX）

打开所创建文件夹输入

# 通过 npx 从 github 下载
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

打开manifest.json添加appid

在终端中安装依赖

pnpm install

编译成微信小程序

pnpm dev:mp-weixin

将文件夹mp-weixin导入开发者工具

3.VS Code

安装uni-app插件

ts类型校验

安装类型声明文件

pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types

配置tsconfig.json

// tsconfig.json
{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    // 类型声明文件
    "types": [
      "@dcloudio/types", // uni-app API 类型
      "miniprogram-api-typings", // 原生微信小程序类型
      "@uni-helper/uni-app-types" // uni-app 组件类型
    ]
  },
  // vue 编译器类型，校验标签类型
  "vueCompilerOptions": {
    // 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`
    "nativeTags": ["block", "component", "template", "slot"], // [!code ++]
    "experimentalRuntimeMode": "runtime-uni-app" // [!code --]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

配置注释

uni-app中只有这两个文件可以写注释

总结