01 创建uniapp项目

通过 HBuilderX 创建

在 HBuilderX 工具里面直接创建即可
image

安装 uni-app vue3 编译器插件

image

如果是小程序，还需要下面的一些配置

  1. 设置 微信开发者工具 安装地址
    image

  2. 开启服务端口
    image

命令行创建 uni-app 项目

1 创建：创建以 typescript 开发的工程

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

（如命令行创建失败，请直接访问 gitee 下载模板）
https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

2. 安装下载依赖包

pnpm i

3. 小程序配置并运行

1. 设置小程序appid

manifest.json 添加 appid

2. 运行项目

会自动生成 小程序文件 dist\dev\mp-weixin

pnpm dev:mp-weixin
3. 导入 微信开发者工具

打开 微信开发者工具 导入 dist\dev\mp-weixin

4. h5配置并运行

运行项目,直接打开即可
pnpm dev:h5

用 VS Code 开发 uni-app 项目

1. 安装相关插件

uni-create-view：快速创建uni-app页面

image

uni-helper：代码提示

image

uniapp小程序扩展：鼠标悬停查文档

image

2. ts 类型校验

安装类型声明文件

pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

配置 tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0", // 新增1
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
	// 新增2
    "types": ["@dcloudio/types", "miniprogram-api-typings", "@uni-helper/uni-app-types"]
  },
  // 新增3
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3. JSON注释： 配置指定json文件可以注释

image

posted @ 2024-05-11 11:05  songxia777  阅读(28)  评论(0)  编辑  收藏  举报