vue3+ts+vite 问题汇总（一）

本人githup项目地址：https://github.com/suidagang/...

1、vscode vue3插件与vue2插件选择注意事项（待完善）

vue2==vetur  vue3==Volar
两者有一些冲突，需要使用哪个版本vue就装那个版本的插件

2、ts 函数重载

见文章

3、vue3 集成prettier和eslint

eslint-plugin-vue地址：vue3的配置
集成eslint：根目录新建.eslintrc.js 可以引用第三方库
yarn add eslint-config-standart eslint-plugin-import eslint-plugin-promise eslint-plugin-node -D

//.eslintrc.js
module.exports = {
    extends:'standart'
}

第二种直接使用 npm i -g eslint
npx eslint --init 根据需求选择

解决eslint报错后自动修改保存，需要用prettier插件
根目录新建.prettierrc 文件

//.prettierrc
{
    "semi": false,//分号是否需要
    "singleQuote": true，//是否为单引号
    "trailingComma": "none"//在多行语法中是否在最后一行添加逗号
}

配置vscode 设置=>搜索save 找到Editor: Format On Save =>打上钩

git提交代码以及提交前校验（eslint，单元测试等）
第一步：npm i husky -D
第二步：npx husky install 会生产一个.husky的文件夹
第三步：npx husky add .husky/pre-commit "npm-run-lint" (git提交前需要eslint检查)（win10 有bug）
第四步：修改.husky 文件下面的pre-commit 内容npm-run-lint 改为npm run lint
第五步：执行提交命令git commit -m "install husky"

git 提交内容规范 commitzen
第一步：npm i -D commitizen
第二步：npx commitizen init cz-conventional-changelog --save-dev --save-exact
完成后：

// package.json
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+   }
+ }

第三步（提交命令使用）：npx cz
或者：使用 yarn commit

//package.json
"scripts": {
        // ...
+    "commit":"cz"
  },

手动提交（vscode）
第一步：npm i @commitlint/config-conventional @commitlint/cli -D
第二步：创建配置文件

// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional']
}

//第三步：使用husky生成commit-msg
（win10注意不要用空格生成文件后改回来）
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

.eslintrc.js

module.exports = {
    env: {
        // browser: true,
        // es2021: true,
        node: true
    },
    extends: [
        'eslint:recommended',
        // "plugin:vue/essential",
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended'
        // "@vue/prettier"
    ],
    globals: {
        // script setup
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineExpose: 'readonly',
        withDefaults: 'readonly'
    },
    parser: 'vue-eslint-parser',
    parserOptions: {
        ecmaVersion: 'latest',
        parser: '@typescript-eslint/parser',
        sourceType: 'module',
        jsxPragma: "React",
        ecmaFeatures: {
            jsx: true
        }
    },
    plugins: ['prettier', 'vue', '@typescript-eslint'],
    rules: {
        'vue/no-v-html': 'off',
        'vue/singleline-html-element-content-newline': 'off',
        'vue/require-default-prop': 'off',
        'vue/require-explicit-emits': 'off',
        'vue/multi-word-component-names': 'off',
        '@typescript-eslint/no-explicit-any': 'off', // any
        'no-debugger': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off', // setup()
        '@typescript-eslint/ban-types': 'off',
        '@typescript-eslint/ban-ts-comment': 'off',
        '@typescript-eslint/no-empty-function': 'off',
        '@typescript-eslint/no-non-null-assertion': 'off',
        '@typescript-eslint/no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^_',
                varsIgnorePattern: '^_'
            }
        ],
        'no-unused-vars': [
            'error',
            {
                argsIgnorePattern: '^_',
                varsIgnorePattern: '^_'
            }
        ],
        'prettier/prettier': [
            'error',
            {
                endOfLine: 'auto'
            }
        ]
    }
};

4、yarn报错

error @typescript-eslint/eslint-plugin@5.13.0: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.15.4"
解决办法：执行命令：yarn config set ignore-engines true（待研究具体含义）

5、import { reactive, ref } from 'vue'; ts报错

导入声明只能在命名空间或模块中使用。ts(1232)

原因是：import必须写在最前面

6、vue-router4.x路由 404页面配置时注意

匹配所有路径 vue2 使用 vue3 使用/:pathMatch(.)_或/:pathMatch(._)或/:catchAll(.*)

7、vue3 深度选择器 修改 element-plus 样式

之前的 '>>>' 已经被废弃，现在使用:deep()伪类
<style scoped> .a :deep(.b) { /* ... */ } </style>

8、vue-router addRoute() 动态路由（https://blog.csdn.net/qq_4191...）

刷新加载动态路由时，需要next({ ...to, replace: true })中的replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。

9、vue-router useRoute 和 useRouter 区别

import { useRoute, useRouter } from 'vue-router'
useRoute：返回当前路由地址 useRouter：返回 router 实例

10、setup name 增强

Vue3的setup语法糖是个好东西，但使用setup语法带来的第一个问题就是无法自定义name，而我们使用keep-alive往往是需要name的，解决这个问题通常是通过写两个script标签来解决，一个使用setup，一个不使用，但这样必然是不够优雅的。
安装：npm i vite-plugin-vue-setup-extend -D
配置：vite.config.ts import VueSetupExtend from 'vite-plugin-vue-setup-extend' plugins: [VueSetupExtend()]
使用：

<script lang="ts" setup name="OrderList"> 

11、API（ref，computed，watch） 自动导入

简介：setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import。我们可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。
安装：npm i unplugin-auto-import -D
配置：vite.config.ts import AutoImport from 'unplugin-auto-import/vite'

plugins: [
    AutoImport({
      imports: ['vue']
    })
  ]

12忽略.vue后缀

配置：vite.config.ts
resolve: {

extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']

}

13、API（ref，computed，watch） 自动导入

简介：setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用，大大的解放了我们的双手。然而对于一些常用的VueAPI，比如ref、computed、watch等，还是每次都需要我们在页面上手动进行import。我们可以通过unplugin-auto-import实现自动导入，无需import即可在文件里使用Vue的API。
安装：npm i unplugin-auto-import -D
配置：vite.config.ts import AutoImport from 'unplugin-auto-import/vite'

plugins: [
    AutoImport({
      imports: ['vue']
    })
  ]

请看下一篇文章