uni-app 使用vscode开发uni-app
  0bfdPFxSVzID 2023年12月07日 19 0


安装插件 uni-create-view

用于快速创建页面

uni-app 使用vscode开发uni-app_json

配置插件

uni-app 使用vscode开发uni-app_uni-app_02


uni-app 使用vscode开发uni-app_uni-app_03

创建页面

uni-app 使用vscode开发uni-app_安装插件_04


uni-app 使用vscode开发uni-app_vscode_05


输入页面名称,空格,顶部导航的标题,回车

自动生成页面并在pages.json中注册了路由

pages\login\login.vue

<template>
  <div class="login">login</div>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped></style>

需将 div 改为 view

uni-app 使用vscode开发uni-app_json_06

安装插件 uni-helper

用于展示代码提示,支持更多代码快捷输入,添加语法提示等。

uni-app 使用vscode开发uni-app_json_07

uni-app 使用vscode开发uni-app_安装插件_08

安装插件 uniapp小程序扩展

用于鼠标悬停官方组件标签时,提示标签解析和官方文档的跳转

uni-app 使用vscode开发uni-app_vscode_09


uni-app 使用vscode开发uni-app_json_10

配置支持给json文件添加注释

仅对 manifest.json 和 pages.json 有效

打开设置

uni-app 使用vscode开发uni-app_json_11


搜索Associations,添加项 manifest.json 和 pages.json ,值为 jsonc

uni-app 使用vscode开发uni-app_安装插件_12

配置支持TS类型校验

1. 安装类型声明文件

cnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types

2. 配置

tsconfig.json 中添加

"@types/wechat-miniprogram",
      "@uni-helper/uni-app-types"

uni-app 使用vscode开发uni-app_安装插件_13

"vueCompilerOptions": {
    "nativeTags": ["block", "component", "template", "slot"]
  },

uni-app 使用vscode开发uni-app_vscode_14


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月07日 0

暂无评论

推荐阅读
0bfdPFxSVzID