vscode开发uniapp项目教程

一，在HB编辑器中用命令行创建uniapp项目（vite+vue3+TS)

npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

注意：搭梯子在创建或者连手机网络创建，按官方提示的下载模板也行。

在HB编辑器中安装vue3插件

二，在vscode中导入uniapp项目

导入项目之后，再安装开发所需要的插件

三、TS类型校验

1，安装类型声明文件

npm  i -D @types/wechat-miniprogram @uni-helper/uni-app-types
// 小程序和uniapp的声明类型

2，配置 tsconfig,json

{
    "compilerOptions": {
        "types": [
            "@dcloudio/types",
             "@types/wechat-miniprogram",
             "@uni-helper/uni-app-types"
        ]
    },
     "vueCompilerOptions": {
         "nativeTags": ["block", "component", "template", "slot"]
     }
}

四、json 注释问题

1，打开设置

2，搜索框输入文件关联，添加项

五、引入uni-ui组件库

1，安装uni-ui

npm i @dcloudio/uni-ui

2，配置easycom

使用

npm

安装好

uni-ui

之后，需要配置

easycom

规则，让

npm

安装的组件支持

easycom

打开项目根目录下的

pages.json

并添加

easycom

节点：

// pages.json
{
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },
    
    // 其他内容
    pages:[
        // ...
    ]
}

详细请查看uniapp官方文档：https://uniapp.dcloud.net.cn/component/uniui/quickstart.html

3，配置uni-ui组件类型声明

3.1 安装依赖

npm i -D @uni-helper/uni-ui-types

3.2 配置依赖