vue3 + vue-cli5 添加 ts 全局语法兼容 和 eslint 兼容

vue3 + vue-cli5 添加 ts和 eslint 的 全局语法兼容

现在 vue3 已经将 ref , relative 等语法糖已经不用再 引入 了 , 所以 写这篇文章在这里 记录下

本章 ts相关 针对于 vue-cli5配置

版本

eslint

在 .eslintrc.js 中添加 以下片段

 // .eslintrc.js
  globals: {
    ref: 'readonly',
    getCurrentInstance: 'readonly',
    onMounted: 'readonly',
    nextTick: 'readonly',
    useRoute: 'readonly',
    onUpdated: 'readonly',
    onBeforeMount: 'readonly',
    onBeforeUnmount: 'readonly',
    onUnmounted: 'readonly',
    reactive: 'readonly',
    shallowRef: 'readonly',
    shallowReactive: 'readonly',
    toRefs: 'readonly',
    useRouter: 'readonly',
    watchEffect: 'readonly',
    computed: 'readonly',
    watch: 'readonly',
    defineProps: 'readonly',
    defineEmits: 'readonly',
    defineComponent: 'readonly',
    defineStore: 'readonly',
    createPinia: 'readonly',
    inject: 'readonly',
    provide: 'readonly'
  },

ts 语法兼容

如何不使用的话，直接用 ref 会爆红 can not find ref 等 , 所以我们需要一个插件辅助 unplugin-auto-import

原地址：unplugin-auto-import的github链接

安装

 npm i -D unplugin-auto-import

修改 vue.config.js

module.exports = defineConfig(() => {
  return {
    // ... 其他配置
    configureWebpack: {
      plugins: [
        AutoImport({
          imports: ['vue', 'vue-router'],
          include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
          dts: 'src/auto-imports.d.ts'
        })
      ]
    },
  }
})

这样子会在 src目录 生成 auto-imports.d.ts ， 这里面就是 vue3 全局语法糖的写法了

更新

5.22

今天通过 element-plus 自动引入的时候报错了 ， 打开页面的时候发现 Cannot read properties of null (reading ‘isCE‘)

然后改成 通过node_modules引入的vue 才解决问题

修改 vue.config.js

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = defineConfig(() => {
  return {
    // 其他
    configureWebpack: {
      // 加入这个
      resolve: {
        symlinks: false,
        alias: {
          vue: path.resolve('./node_modules/vue')
        }
      },
      plugins: [
        AutoImport({
          imports: ['vue', 'vue-router'],
          include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
          dts: 'src/auto-imports.d.ts',
          resolvers: [ElementPlusResolver()]
        }),
        Components({
          resolvers: [ElementPlusResolver()]
        })
      ]
    }
  }
})

故障原因可能是: vue 的版本是 3.2.13 , 但是 element-plus 所需版本为 3.2.0 , 我猜可能是这样