【uniapp】小程序开发，初始化项目vscode-Toy模板网

这篇具有很好参考价值的文章主要介绍了【uniapp】小程序开发，初始化项目vscode。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用uniapp开发小程序可以实现一份代码打包成多个不同平台的小程序。
这里使用uniapp官方的项目模板作为示例，采用vue3+ts开发，并使用vscode作为开发工具

一、通过命令行创建项目并运行

1、通过以下命令创建模板项目

参考官方说明

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

创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

【uniapp】小程序开发，初始化项目vscode,前端,uni-app,vscode,小程序
创建完成后，用vscode打开项目

2、安装工程依赖包

pnpm i --force

在文件manifest.json中配置微信小程序appid

3、编译成微信程序版本

pnpm dev:mp-weixin

4、编译成功后，会生成目录 dist/dev/mp-weixin，用微信开发者工具导入该目录即可运行

二、安装vscode插件

1、uni-create-view：快速创建页面

安装后可以配置创建的页面是vue3或vue2，以及是否创建同名文件夹

【uniapp】小程序开发，初始化项目vscode,前端,uni-app,vscode,小程序

2、uni-helper： uniapp代码提示

安装后，可以通过ctrl+i唤起代码提示，实现快速输入

【uniapp】小程序开发，初始化项目vscode,前端,uni-app,vscode,小程序

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

【uniapp】小程序开发，初始化项目vscode,前端,uni-app,vscode,小程序

问题

1、Cannot find module ‘vue’ or its corresponding type declarations.ts(2307)
如果出现上面问题，大概率是ts版本问题，使用快捷键ctrl+shift+p 打开搜索 type 就会显示如下:
【uniapp】小程序开发，初始化项目vscode,前端,uni-app,vscode,小程序
选择工作台里面的版本即可：

三、配置ts类型校验

参考官方文档：https://uni-helper.js.org/uni-app-types

这里要注意，不同的 volar 版本，配置是不一样的，以下示例是v1.8.18

1、安装类型声明文件

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

2、配置tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "sourceMap": true,
    "useDefineForClassFields": true,
    "jsx": "preserve",
    "target": "ESNext",
    "baseUrl": ".",
    "ignoreDeprecations": "5.0",
    "verbatimModuleSyntax": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types"
    ]
  },
  "vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}