uniapp项目实践第二章：使用vscode开发uniapp项目

﹏ヽ暗。殇╰゛Y 2024-03-23 23:41 207阅读 0赞

使用vscode开发uniapp项目

简介：本文讲解如何使用vscode开发uniapp项目。

首先使用vscode打开项目
在这里插入图片描述
安装插件
在这里插入图片描述

然后就可以新建uniapp页面了
在这里插入图片描述

创建新的页面，并且整理好代码
在这里插入图片描述
在这里插入图片描述
查看路由
在这里插入图片描述

安装插件
在这里插入图片描述
在这里插入图片描述
然后鼠标悬停，就有了提示
在这里插入图片描述
可以一键跑到对应的官方文档
在这里插入图片描述

运行下面的命令
npm install --save-dev @types/wechat-miniprogram @uni-helper/uni-app-types
在这里插入图片描述
重新编写tsconfig.json文件，配置完下面的，就可以对ts进行语法检测了
在这里插入图片描述
在这里插入图片描述

  1. {
  3.   "extends": "@vue/tsconfig/tsconfig.json",
  4.   "compilerOptions": {
  6.     "sourceMap": true,
  7.     "baseUrl": ".",
  8.     "paths": {
  10.       "@/*": ["./src/*"]
  11.     },
  12.     "lib": ["esnext", "dom"],
  13.     "types": [
  14.       "@dcloudio/types",
  15.       "@types/wechat-miniprogram",
  16.       "@uni-helper/uni-app-types"]
  17.   },
  18.   // vue 编译器类型，校验标签类型
  19.   "vueCompilerOptions": {
  21.     "nativeTags": ["block", "component", "template", "slot"]
  22.   },
  23.   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
  24. }

在这里插入图片描述

这个时候ctrl+i就可以代码提示了
在这里插入图片描述

对于代码注释报警的处理
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  1. // 配置语言的文件关联
  2.   "files.associations": {
  4.     "pages.json": "jsonc",
  5.     "manifest.json": "jsonc",
  6.   }

发表评论

表情：
评论列表 （有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读