Open forzgc opened 6 months ago
再补充一个,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 快速生成组件/页面代码了
嗯嗯,感谢分享,我们近期也有参考volar对目前mpx插件进行升级重构的计划,也会重点完善模版提示相关的内容。
在使用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支持
.vscode/settings.json
完成以上配置后就可以愉快的开发mpx组件了,不过Vue - Official 自然不支持小程序的组件和模板语法提示,这方面是目前欠缺的,其实插件支持定义全局组件和指令类型,有感兴趣的可以自己试试。