這幾天更新vscode vetur的后? 項目一直轉(zhuǎn)loading加載不出來了，索性就直接換volar了。

一、基礎配置

但是volar的配置在vue3和vue2里是不太一樣的? ?需要一些額外的配置。記錄一下踩坑。

首先vscode安裝擴展 Vue Language Features (Volar) 、?TypeScript Vue Plugin (Volar)? 并且卸載或者禁用掉原本的vetur。

跟著官方文檔走。

Vue Language Features (Volar) - Visual Studio Marketplace

1、首先如果是 vue <= 2.6.14 添加@vue/runtime-dom依賴

npm install @vue/runtime-dom@latest --save-dev

2、然后在根目錄下創(chuàng)建一個tsconfig.json 配置文件

這里主要要設置vueCompilerOptions的target屬性指定版本。

使用js的話需要開啟 allowJs 以及 noEmit , 其它 tsconfig.json相關(guān)配置自行百度

{
  "include": ["./src/**/*.ts", "./src/**/*.d.ts", "./src/**/*.vue" ,"./src/**/*.js"],
  "compilerOptions": {
    "target": "es2019",
    "lib": ["es2019"],
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "composite": true,
    "declaration": true,
    "strict": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "noUnusedLocals": false,
    "esModuleInterop": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "allowJs": true,
    "noEmit": true,
  },
  "exclude": ["node_modules"],
  "vueCompilerOptions": {
    //"target":2.7  // vue > 2.6.14
    "target": 2,
    "extensions": [".vue"]
  }
}

3、

如果原先用的vetur 或者用 vue-cli 創(chuàng)建的vue2 ts項目? 有 shims-tsx.d.ts 和 shims-vue.d.ts 可以刪了，已經(jīng)包含有了。

4、在vue文件中想要獲取額外提示的話，需要將Vue.extend替換掉。

Template type-checking is not supported with?Vue.extend. You can use?composition-api,?vue-class-component, or?export default { ... }?instead of?export default Vue.extend.

?這里個人是使用composition-api ，支持比較全一點。

export default { ... data(){}} 改成export default defineComponent({...vueoptions})?

然后volar其實本身是有一個虛擬code來包裹代碼的，默認支持vue3

vue2.6.14以下下的版本?在ts/jsconfig.json之中改一下默認配置就好了。

"vueCompilerOptions": {
    //...
    "optionsWrapper": [
      "(await import('@vue/runtime-core')).defineComponent(", // vue < 2.6.14
      ")"
    ]
  }

然后你就能在vue文件之中看見??

至此基本配置可以了。 可以看到代碼中已經(jīng)可以獲取vue的代碼提示了。

?二、vue的全局屬性代碼提示

除了基本的代碼提示外，還有main.js中給vue實例添加的全局屬性、組件等。

這里定義一個globar.d.ts

// declare module '@vue/runtime-core' {  // Vue 3
// declare module 'vue' {   // Vue 2.7
declare module '@vue/runtime-dom' {
  // Vue <= 2.6.14
  // 4種全局聲明 按需求聲明
  // ComponentCustomOptions : Component custom options when you defineComponent, eg: onBeforeRouteUpdate
  // ComponentCustomProperties : Custom vm properties available on the componentInstance, eg: $router
  // GlobalComponents : Components added to the app/global, available on every component (render), eg: router-view
  // GlobalDirectives : Directives defined to the app/global, available on every component (render), eg: v-tooltip

export interface ComponentCustomProperties {
    // vue.prototype 的全局屬性方法等
    constant: typeof import('@/utils/constant')['default'];
}

和原本的定義差不多? 區(qū)別就是聲明的模塊不太一樣

//vetur中聲明全局屬性方法
declare module 'vue/types/vue' {
? interface Vue {
? ? constant: typeof import('@/utils/constant')['default'];
}
}

然后在代碼中就可以獲取代碼提示和路徑跳轉(zhuǎn)了

文章來源地址http://www.zghlxwxcb.cn/news/detail-562234.html

到了這里，關(guān)于vscode vue2 + volar 全局代碼提示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！