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

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

## 使用vscode开发uniapp项目 ##

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

首先使用vscode打开项目  
![在这里插入图片描述][122bd06ba8c14198b5493cc609c554ef.png]  
安装插件  
![在这里插入图片描述][b36bd2cf048e4858ad66425eeef05867.png]

然后就可以新建uniapp页面了  
![在这里插入图片描述][f69b82f2804a47f78535b0397e1da0d9.png]

创建新的页面，并且整理好代码  
![在这里插入图片描述][0ee258b100e64e4f8088d95f4b7cdf87.png]  
![在这里插入图片描述][202be436adb540f6a16a7e0db491cc75.png]  
查看路由  
![在这里插入图片描述][8356bd778f354756b745969aa199a190.png]

安装插件  
![在这里插入图片描述][d482e5e85f0340b18b74ba09b3c9e48b.png]  
![在这里插入图片描述][783a1707d9db4e37b6348f9097e31d6c.png]  
然后鼠标悬停，就有了提示  
![在这里插入图片描述][7f43914c6ea74e81a51b53c33a7c6811.png]  
可以一键跑到对应的官方文档  
![在这里插入图片描述][8ac6390719f945338c5777b8e8c10c77.png]

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

{
        
      "extends": "@vue/tsconfig/tsconfig.json",
      "compilerOptions": {
        
        "sourceMap": true,
        "baseUrl": ".",
        "paths": {
        
          "@/*": ["./src/*"]
        },
        "lib": ["esnext", "dom"],
        "types": [
          "@dcloudio/types",
          "@types/wechat-miniprogram",
          "@uni-helper/uni-app-types"]
      },
      // vue 编译器类型，校验标签类型
      "vueCompilerOptions": {
        
        "nativeTags": ["block", "component", "template", "slot"]
      },
      "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
    }

![在这里插入图片描述][5fbd728eef9243d29369b9933a8a4d4f.png]

这个时候ctrl+i就可以代码提示了  
![在这里插入图片描述][3e2d8b697b574f5eb0e36cd7d9b16d2a.png]

对于代码注释报警的处理  
![在这里插入图片描述][0c5dd289b97b4e4a95e52a088cd10028.png]  
![在这里插入图片描述][2804d4612f73451f91521a8c93f8dc35.png]

![在这里插入图片描述][cc318f9b676c43268654dd8dac491289.png]

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

[122bd06ba8c14198b5493cc609c554ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/18f09e43253d4850b334b947383fdc33.png
[b36bd2cf048e4858ad66425eeef05867.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9e186533e4d04c6a97452774ccff6258.png
[f69b82f2804a47f78535b0397e1da0d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/549709134d51414d98344bf668389f73.png
[0ee258b100e64e4f8088d95f4b7cdf87.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/cd6241699da149c6a61d0d8dd79aa4b7.png
[202be436adb540f6a16a7e0db491cc75.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1c4b856196cd4e2099b16749ca1386fd.png
[8356bd778f354756b745969aa199a190.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/1889427625cb432dbe5dc5b9d9e57e85.png
[d482e5e85f0340b18b74ba09b3c9e48b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/fca7b1125f1a4e848d97e154399e218e.png
[783a1707d9db4e37b6348f9097e31d6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/ec692e01ff65486d8d940c6ea8012ded.png
[7f43914c6ea74e81a51b53c33a7c6811.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/0ccbf2adabc94e1ba133a47368cf5f1e.png
[8ac6390719f945338c5777b8e8c10c77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/14ade0075f5346639771defd2e6b01ef.png
[8da408b9140946f28936e68081dccad0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/25813ccdbf9c45ddaf421479dae06671.png
[41ec7533b49c462892866c66561ea069.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/8a0f2e0f95414545b77c86902fe186b1.png
[0d70024e41f740ee8f72b4dc2bd5f5c8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9f29aa3fef764b4581533d3c3d646c14.png
[5fbd728eef9243d29369b9933a8a4d4f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/b553d8c6aa1549c4815241a0a19ad5b8.png
[3e2d8b697b574f5eb0e36cd7d9b16d2a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/10dd72a9ba4b4ec3b628e48d92a3b370.png
[0c5dd289b97b4e4a95e52a088cd10028.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/49fbfa68c6cd4028a85b75b64e7ffa86.png
[2804d4612f73451f91521a8c93f8dc35.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/920518c3b3ef4c97ac24ef1eed3c6913.png
[cc318f9b676c43268654dd8dac491289.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e9e7c94ae64b429cafdab1ad60cb22aa.png