使用vscode开发uni-app
这里的创建使用用vue3+ts版本，如过是vue2，具体可参考官网命令
uni-app官网文章来源：https://www.toymoban.com/news/detail-784487.html
- 首先创建uni-app
`npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project`
- 需要再vscode中下载uni-app插件，以方便开发
- uni-create-view 快速常见uni-app页面
- uni-helper uni-app代码提示
- uniapp小程序扩展 鼠标悬停查看文档
- 安装ts声明校验
- 安装 类型声明文件
`pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types`
- 配置
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"]
}
- 工作区设置参考
// .vscode/settings.json
{
// 在保存时格式化文件
"editor.formatOnSave": true,
// 文件格式化配置
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// 配置语言的文件关联
"files.associations": {
"pages.json": "jsonc", // pages.json 可以写注释
"manifest.json": "jsonc" // manifest.json 可以写注释
}
}
- JSON 注释问题
- 设置文件关联，把
manifest.json和pages.json设置为jsonc
- danger 版本升级 ,在ts.config.json中的types中进行添加
- 原依赖 `@types/wechat-miniprogram` 现调整为 `miniprogram-api-typings`
- 原配置 `experimentalRuntimeMode` 现调整为 `nativeTags`。
这一步处理很关键，否则 TS 项目无法校验组件属性类型。文章来源地址https://www.toymoban.com/news/detail-784487.html
到了这里，关于使用vscode开发小程序项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
