We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在使用ts开发mpx组件的时候,发现官方的mpx插件对ts的支持有些问题。比如想使用外部函数,经常无法自动提示项目中ts代码的导出,而且对tsconfig中配置的路径别名支持也不够完善,还有template中wxml不会自动填充闭合标签,对monorepo项目的支持也不太好等问题。所以尝试使用 Vue - Official 代替 mpx ,这几天使用后,发现效果还不错,有接近开发vue的体验。
要想使用 Vue - Official 代替 mpx 需要进行下面几个配置。
配置文件关联,将mpx文件关联为vue
"files.associations": { "*.wxss": "css", "*.wxs": "javascript", "*.mpx": "vue" }
如果之前配置了mpx的eslint,需要修改为vue
"eslint.validate": [ "javascript", "javascriptreact", "vue" ],
关闭元素style css校验,不然小程序的动态样式写法vscode会提示错误
"css.validate": false, // 关闭 <template> 中style css校验
添加以下配置启用ts支持
"vueCompilerOptions": { "extensions": [".mpx"], // 让插件将mpx文件当作vue文件 "skipTemplateCodegen": true, // 跳过template中的类型检查 },
.vscode/settings.json
"javascript.preferences.autoImportFileExcludePatterns": ["vue", "vue-demi"], // 关闭来自vue的自动导入提示 "typescript.preferences.autoImportFileExcludePatterns": ["vue", "vue-demi"], // 关闭来自vue的自动导入提示
完成以上配置后就可以愉快的开发mpx组件了,不过Vue - Official 自然不支持小程序的组件和模板语法提示,这方面是目前欠缺的,其实插件支持定义全局组件和指令类型,有感兴趣的可以自己试试。
The text was updated successfully, but these errors were encountered:
再补充一个,mpx组件/页面的代码模板填充可以使用 vscode 自带的 Code snippets 完成。
创建文件 .vscode/mpx.code-snippets
{ "mpx component": { "scope": "vue", "prefix": ["component"], "body": [ "<template></template>", "", "<script lang=\"ts\">", "import { createComponent } from '@mpxjs/core'", "", "createComponent({})", "</script>", "", "<style scoped></style>", "", "<script type=\"application/json\">", "{", "\t\"usingComponents\": {}", "}", "</script>", "" ], "description": "生成组件代码" }, "mpx page": { "scope": "vue", "prefix": ["page"], "body": [ "<template></template>", "", "<script lang=\"ts\">", "import { createPage } from '@mpxjs/core'", "", "createPage({})", "</script>", "", "<style scoped></style>", "", "<script type=\"application/json\">", "{", "\t\"usingComponents\": {}", "}", "</script>", "" ], "description": "生成页面代码" } }
这样就可以在mpx文件中 输入 component/page 快速生成组件/页面代码了
Sorry, something went wrong.
嗯嗯,感谢分享,我们近期也有参考volar对目前mpx插件进行升级重构的计划,也会重点完善模版提示相关的内容。
No branches or pull requests
在使用ts开发mpx组件的时候,发现官方的mpx插件对ts的支持有些问题。比如想使用外部函数,经常无法自动提示项目中ts代码的导出,而且对tsconfig中配置的路径别名支持也不够完善,还有template中wxml不会自动填充闭合标签,对monorepo项目的支持也不太好等问题。所以尝试使用 Vue - Official 代替 mpx ,这几天使用后,发现效果还不错,有接近开发vue的体验。
要想使用 Vue - Official 代替 mpx 需要进行下面几个配置。
配置文件关联,将mpx文件关联为vue
如果之前配置了mpx的eslint,需要修改为vue
关闭元素style css校验,不然小程序的动态样式写法vscode会提示错误
添加以下配置启用ts支持
使用响应式api时,比如computed,自动导入总是优先提示vue的,可以在通过配置关闭
.vscode/settings.json
完成以上配置后就可以愉快的开发mpx组件了,不过Vue - Official 自然不支持小程序的组件和模板语法提示,这方面是目前欠缺的,其实插件支持定义全局组件和指令类型,有感兴趣的可以自己试试。
The text was updated successfully, but these errors were encountered: