vetur组件相关配置

vetur配置组件数据

1. vscode中可以通过ctrl + 鼠标左键 跟踪文件

   对于项目中类似别名 '@/component/header.vue' 想要实现ctrol + 鼠标左键跟踪

   在项目根目录配置jsconfig.json(tsconfig.json)

   // tsconfig.json
   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": [
           "src/*"
         ]
       }
     }
   }
   

2. 如果想在js或者ts文件中提示vue后缀文件
   

       // src/vue-shims.d.ts
       
       declare module "*.vue" {
           import Vue from "vue";
           export default Vue;
       }
   

   You need to add declare module '*.vue' in your dts files: github.com/Microsoft/T… (opens new window).

3. 全局组件友好提示

   在vue文件的template模板输入 < 触发组件提示

   • 1 非全局组件选中会自动补全import引入并在components中注册

   

   • 2 全局组件会在右侧提示组件源码export default中的所有内容 这只是提示，不要忘记全局注册同名组件

   

   对于普通的vue项目可以通过vetur.config.js进行配置globalComponents

   // vetur.config.js
   /** @type {import('vls').VeturConfig} */
   module.exports = {
     projects: [
       {
         root: './',
         // **optional** default: `[]`
         // Register globally Vue component glob.
         // If you set it, you can get completion by that components.
         // It is relative to root property.
         // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
         globalComponents: [
           './src/components/**/*.vue',
           {
             // Component name
             name: 'FakeButton',
             // Component file path, please use '/'.
             path: './src/app/components/AppButton.vue'
           }
         ]
       }
     ]
   }
   

   vetur.config.js配置的全局组件提示功能足够开发用了
   也可自定义提示文案了解一下vetur官方Workspace Component Data
   如果你的框架好多人在用比如nuxt 参考vuejs.github.io/vetur/guide…
   nuxt项目全局注册组件 参考这里 或者这里