Vue-Map README

Makes it easy to search your code and jump to your code you want

English

简体中文

English {#english}

points

This feature is limited to .vue files and requires Vue 3.0 or later with the setup() syntax

views

1. templateView
   It's a small-scale DOM visualization of your Vue template, making it easy to switch between template, script code, and styles by clicking

2. fixView
   You can fix your template to keep them alive in your fixview, it's a little store to store your template

3. importView
   It packages all your external dependencies

4. scriptView

• ref
  It includes all your reactive state, comprising refs, reactive objects, and computed properties

• function
  It encompasses all your defined functions, including lifecycle hooks and event handling functions

5. styleView
   It encompasses all your defined CSS classes, and suggests using class-based styling

Release Notes

1.0.0

init

1.0.1

Fixed issues with editor cursor flickering, optional chaining variables, and functions with parameters not being matched

简体中文 {#chinese}

注意

这个插件适用于vue文件并且需要vue版本超过3.0,使用setup组合式语法避免出现匹配问题

视图

1. templateView(模板视图)
   它是vue模板的小型Dom模拟图,可以使你在模板、逻辑、样式之间快速跳转。

2. fixView(固定视图)
   你可以通过固定你的重要模板使其保留在固定视图，方便跳转和查看它的属性。

3. importView(引入视图)
   它包括你所有引入的依赖和组件。

4. scriptView(逻辑视图)

• ref(响应式变量)
  包括了你定义的所有的ref,reactive,computed等响应式变量。

• function
  包括你定义的所有函数,包括生命周期函数和事件处理函数。

5. styleView(样式视图)
   它包括你定义的所有css类,建议使用class绑定样式。

For more information

• Visual Studio Code's Markdown Support

Enjoy!