Vue3+ts开发学习 · 基础准备

2024-04-01 About 300 words One minute

黑马的视频学习

VSCode配置一个uni-app + TS项目

uni-app插件
- uni-create-view
- uni-helper
- uniapp小程序扩展

ts类型校验

声明类文件

1

pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types

配置tsconfig.json

1
2
3
4
5


  "types": [
    "@dcloudio/types",
    "miniprogram-api-typings",
    "@uni-helper/uni-app-types"
  ]

1
2
3
4


"vueCompilerOptions": {
  // experimentalRuntimeMode 已废弃，现调整为 nativeTags，请升级 Volar 插件至最新版本
  "nativeTags": ["block", "component", "template", "slot"]
},

json注释问题

内部配置

mainifest.json中添加微信小程序的appid

一定是小程序相关的appid配置

配置相关内容

1

pnpm i -D miniprogram-api-typings @uni-helper/uni-app-types

1
2


// 配置微信小程序编译环境
pnmp dev:mp-weixin

编译完成的结果是在dist目录下导入微信开发者工具

统一代码风格

安装eslit + prettier

安装

1

pnpm i -D eslint prettier-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript @rushstack/eslint-patch @vue/tsconfig

添加eslint配置，新建.eslintrc.cjs文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45


/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  // 小程序全局变量
  globals: {
    uni: true,
    wx: true,
    WechatMiniprogram: true,
    getCurrentPages: true,
    getApp: true,
    UniApp: true,
    UniHelper: true,
    App: true,
    Page: true,
    Component: true,
    AnyObject: true,
  },
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true,
        semi: false,
        printWidth: 100,
        trailingComma: 'all',
        endOfLine: 'auto',
      },
    ],
    'vue/multi-word-component-names': ['off'],
    'vue/no-setup-props-destructure': ['off'],
    'vue/no-deprecated-html-element-is': ['off'],
    '@typescript-eslint/no-unused-vars': ['off'],
  },
}