不再手寫import - VSCode自動引入Vue組件和Js模塊

LiuRhoRamen 發布于2019-08-22 18:49 / 3628人閱讀

摘要：如要自動引入組件，首先需安裝拓展自動引入組件和普通模塊在根目錄添加。使用自動引入中的安裝拓展配置輸入命令后選擇引入包其他自動引入組件和模塊后，按住點擊路徑可直接跳到該文件文章原始發布于我的博客

如要自動引入Vue組件，首先需安裝VSCode拓展： Vetur

自動引入Vue組件和普通Js模塊

在根目錄添加 jsconfig.json 。
每次修改jsconfig.json后需重啟該VSCode窗口

{
  "include": [
    "./src/**/*"
  ],
}

支持Webpack別名路徑

同上，需更新 jsconfig.json

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

在JS中自動引入node_modules中的JS

以lodahs為例，安裝 lodash: npm install lodash

在根目錄添加 jsconfig.json

{
  "compilerOptions": {
    "checkJs": true,
  },
  "include": [
    "node_modules/lodash/*"
  ],
}

輸入關鍵字后，點擊提示燈泡（快鍵鍵: Ctrl/Command + .），選擇JS模塊

注意： checkJs可能會引起部分項目語法報錯，如有報錯可使用下面的方法作為替代方案。

使用Npm Intellisense自動引入node_modules中的JS

安裝VSCode拓展： Npm Intellisense

配置 Npm Intellisense

{
  "npm-intellisense.scanDevDependencies": true,
  "npm-intellisense.importES6": true,
  "npm-intellisense.importQuotes": """,
  "npm-intellisense.importLinebreak": ";
",
  "npm-intellisense.importDeclarationType": "const",
}

VSCode輸入命令（Ctrl/Command + Shift + P）: Npm Intellisense: Import module后, 選擇引入包

其他

自動引入Vue組件和JS模塊后，按住Ctrl/Command點擊路徑可直接跳到該文件

文章原始發布于：我的博客

GPU云服務器云服務器 cdn引入vue vue組件 vue組件開發 vue父子組件通訊

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96246.html

手摸手，帶你用vue擼后臺系列一(基礎篇)

摘要：詳細具體的使用可以見文章手摸手，帶你優雅的使用。為了加速線上鏡像構建的速度，我們利用源進行加速并且將一些常見的依賴打入了基礎鏡像，避免每次都需要重新下載。完整項目地址：vue-element-admin系類文章二：手摸手，帶你用vue擼后臺系列二（登錄權限篇）系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列四(vueAdmin 一...

xiaotianyi 2019-08-22 11:03 評論0 收藏0
Vue開發總結及一些最佳實踐（已更新）

摘要：基本開發環境創建的項目，作為代碼編寫工具插件推薦插件配置文章目錄項目目錄結構介紹框架選擇處理請求二次封裝項目目錄結構簡介業務相關靜態文件全局組件基礎樣式布局樣式及工具引入請求配置路由全局狀態管理工具文件入口文件主要配置文件頁面檢查配置測試基本開發環境 vue-cli3 創建的項目，vscode 作為代碼編寫工具vscode插件推薦：vscode 插件配置文章目錄項目目錄結構介紹...

NotFound 2019-08-26 13:47 評論0 收藏0
如何更有效率和質量地開發Vue項目

摘要：前言自總結完了上篇前端工程化的思想，并在全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發項目，以及其中踩過的一個個坑。。。前言自總結完了上篇前端工程化的思想，并在vue全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發vue項目，以及其中踩過的一個個坑。。。基于vue-cli的自定義模板（Custom Templates）小伙伴們的vue項目應該都...

ShevaKuilin 2019-08-20 18:15 評論0 收藏0