[uniapp] Small program development, initialization project vscode

Using uniapp to develop small programs can package one code into multiple small programs for different platforms.
Here we use the official project template of uniapp as an example, develop it using vue3+ts, and use vscode as the development tool.

1. Create a project and run it through the command line

1. Create a template project through the following command

Refer to official instructions

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

Create a project developed with typescript (if the command line creation fails, please visit gitee directly to download the template)

Insert image description here
After creation, open the project with vscode

2. Install project dependency packages

pnpm i --force

manifest.jsonConfigure the WeChat applet appid in the file

3. Compile into WeChat program version

pnpm dev:mp-weixin

4. After successful compilation, the directory dist/dev/mp-weixin will be generated. Use WeChat developer tools to import this directory and run it.

2. Install the vscode plug-in

1. uni-create-view
Insert image description here
2. uni-helper

3. uniapp applet extension

question

1. Cannot find module 'vue' or its corresponding type declarations.ts (2307)
If the above problem occurs, it is most likely a ts version problem. Use the shortcut key ctrl+shift+p to open the search type and it will be displayed as follows: Select the
Insert image description here
workbench version can be:

3. Configure ts type verification

1. Installation type declaration file

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

2. Configure tsconfig.json

{
    
    
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    
    
    "sourceMap": true,
    "useDefineForClassFields": true,
    "jsx": "preserve",
    "target": "ESNext",
    "baseUrl": ".",
    "ignoreDeprecations": "5.0",
    "verbatimModuleSyntax": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "paths": {
    
    
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-app-types"
    ]
  },
  "vueCompilerOptions": {
    
    
    "experimentalRuntimeMode":"runtime-uni-app"
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

4. JSON annotation issues

manifest.jsonIt pages.jsonis allowed to write comments in uniapp . There will be an error message by default in vscode, which can be solved through the following configuration:

Open the settings in the lower left corner, search for Associations, and add manifest.jsonandpages.json
Insert image description here