站長資訊網
        最全最豐富的資訊網站

        實戰:vscode中開發一個支持vue文件跳轉到定義的插件

        實戰:vscode中開發一個支持vue文件跳轉到定義的插件

        前端(vue)入門到精通課程:進入學習
        Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具:點擊使用

        vscode自身是支持vue文件組件跳轉到定義的,但是支持的力度是非常弱的。我們在vue-cli的配置的下,可以寫很多靈活的用法,這樣可以提升我們的生產效率。但是正是這些靈活的寫法,導致了vscode自身提供的功能無法支持跳轉到文件定義。為了兼容這些靈活的寫法,提高工作效率,所以寫了一個vscode支持vue文件跳轉到定義的插件。【推薦學習:《vscode教程》】

        插件

        vscode支持vue文件跳轉到定義的插件(vue jumper)已正式發布到vscode插件市場,可以到vscode插件市場直接下載體驗。

        實戰:vscode中開發一個支持vue文件跳轉到定義的插件

        功能

        該插件支持vue-cli提供給我們很多組件引用寫法的跳轉支持。

        1、省略寫法跳轉支持

        我們在引用組件的時候,如果組件的名稱是index.vue或者index.js時,我們引入時可以省略index.vue或者index.js。如果我們使用了省略寫法,vscode自身是無法支持跳轉的,所以該插件需要支持省略寫法跳轉。

        import MycoMponent from '../components/MyComponent' // '../components/MyComponent/index.vue'
        登錄后復制

        2、alis別名路徑跳轉支持

        在vue-cli(webpack)的配置下,我們可以配置alis別名,這樣我們可以提升生產效率,但是vscode本身是不支持的,所以該插件需要支持alis別名路徑跳轉。

        import MycoMponent from '@/components/MyComponent'
        登錄后復制

        3、components注冊別名跳轉支持

        vscode本身是支持components注冊別名跳轉的(如果引入時有省略寫法和alis別名路徑也是不支持的),所以該插件也需要支持components注冊別名跳轉。

        <script> import MycoMponent from '@/components/MyComponent' export default {     components: {         MycoMponentReName: MycoMponent     } } </script>
        登錄后復制

        4、mixins中引入的組件跳轉支持

        在實際開發中,我們可以有很多復用的功能抽離到了mixins中,其中包含了組件的引入和注冊,這個vscode本身是不支持跳轉的,所以該插件支持mixins引入的情況。

        <template>     <MyComponent /> </template> <script> import myMixins from '@/mixins/myMixins' export default {     mixins: [myMixins] } </script>
        登錄后復制

        // myMixins.js import MycoMponent from '@/components/MyComponent' export default {     components: {         MycoMponent     } }
        登錄后復制

        5、全局組件引入跳轉支持

        在全局中注冊的組件,vscode本身是不支持這種情況的跳轉的。由于全局組件引入的情況比較復雜,該插件使用了模糊查找的方式來查找組件定義的地方,做到了全局組件引入的跳轉支持。

        <template>     <MyComponent /> </template> <script>
        登錄后復制

        // main.js import vue from 'vue' import MycoMponent from './components/MyComponent' vue.use(MycoMponent)
        登錄后復制

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 日本精品少妇一区二区三区| 亚洲精品成人网站在线观看| 中国国产精品| 欧美精品亚洲精品日韩专区va| 亚洲精品久久久www| www.日韩精品| 国产精品日本一区二区不卡视频 | 久久露脸国产精品| 99久久国产综合精品五月天喷水| 精品国精品国产自在久国产应用| 人妻少妇精品无码专区动漫| 国产精品秘入口福利姬网站| 国产精品久久久久久久久| 无码国产69精品久久久久网站| 精品国产免费一区二区三区| 欧美视频精品一区二区三区| 成人区精品一区二区不卡| 最新国产精品无码| 婷婷国产成人精品一区二| 久久成人国产精品一区二区| 国产精品国产三级在线高清观看| 国产在视频线精品视频二代| 国精品午夜福利视频不卡| 日韩AV无码精品人妻系列| 亚洲一区爱区精品无码 | 精品国产免费一区二区三区香蕉 | 久久精品国产色蜜蜜麻豆| 91嫩草亚洲精品| 久久综合九色综合精品| 999精品视频| 国产成人无码久久久精品一 | 精品人妻伦九区久久AAA片69| 97精品国产高清自在线看超| 在线精品国产一区二区| 99久久国产综合精品五月天喷水 | 亚洲精品国产美女久久久| 亚洲国产精品无码久久久久久曰| 国产亚州精品女人久久久久久| 精品国产亚洲一区二区在线观看| 国产香蕉国产精品偷在线观看| 国产91在线精品|