vs 中能引用 php文件吗,VSCode如何引入Vue组件和Js模块

本文介绍了如何在VSCode中自动引入Vue组件和JavaScript模块,包括设置jsconfig.json以支持Webpack别名,以及通过配置NpmIntellisense插件实现node_modules中JS模块的自动引入。详细步骤包括添加配置文件、修改参数和使用快捷操作。
摘要由CSDN通过智能技术生成

这篇文章给大家分享的内容是关于VSCode如何自动的引入Vue组件和Js模块,有需要的朋友可以参考一下。

自动引入Vue组件和普通Js模块

在根目录添加 jsconfig.json 。

每次修改jsconfig.json后需重启该VSCode窗口{ "include": [ "./src/**/*"

],

}

1217fd490e4828683b6e8b4954607bc1.gif

e6a319798b5262c70141cd76c6d9b2e0.gif

支持Webpack别名路径

同上,需更新 jsconfig.json{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": [ "./src/*"

]

},

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

],

}

04153063ac38ebd446b2264390c73330.gif

d60d836bbb4e0361a2ea085d051abbd2.gif

在JS中自动引入node_modules中的JS以lodahs为例,安装 lodash: npm install lodash

在根目录添加 jsconfig.json{ "compilerOptions": { "checkJs": true,

}, "include": [ "node_modules/lodash/*"

],

}输入关键字后,点击提示灯泡(快键键: Ctrl/Command + .),选择JS模块注意: checkJs可能会引起部分项目语法报错,如有报错可使用下面的方法作为替代方案。

77b162d6c4faf1b89a1d177612f3e0f8.gif

使用Npm Intellisense自动引入node_modules中的JS安装VSCode拓展: Npm Intellisense

配置 Npm Intellisense{ "npm-intellisense.scanDevDependencies": true, "npm-intellisense.importES6": true, "npm-intellisense.importQuotes": "'", "npm-intellisense.importLinebreak": ";\r\n", "npm-intellisense.importDeclarationType": "const",

}VSCode输入命令(Ctrl/Command + Shift + P): Npm Intellisense: Import module后, 选择引入包

d646c77003edab907326da8595e75d72.gif

其他

自动引入Vue组件和JS模块后,按住Ctrl/Command点击路径可直接跳到该文件

5cc66dc018e5caf447d83007bd65541c.gif

1a1ab39c8a0308be3f228d3a8803a898.gif

相关推荐:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Visual Studio Code引入Vue.js可以通过以下步骤进行: 1. 首先,在你的HTML文件添加引用Vue.js的代码。你可以选择使用本地文件或者使用CDN链接。如果你选择使用本地文件,你需要下载Vue.js文件并将其放置在你的项目目录。例如,你可以将Vue.js文件放在与你的HTML文件相同的目录下。然后,在你的HTML文件添加以下代码: ```html <script src="vue-2.7.14.js"></script> ``` 如果你选择使用CDN链接,你可以在你的HTML文件添加以下代码: ```html <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> ``` 这个CDN链接会自动加载最新版本的Vue.js。 2. 接下来,你需要创建一个Vue实例并将其绑定到你的HTML元素上。在你的JavaScript代码,你可以使用以下代码创建Vue实例: ```javascript var vm = new Vue({ el: "#app", data: { msg: "Hello Vue.js" } }); ``` 这个代码会将Vue实例绑定到id为"app"的HTML元素上,并将数据对象的msg属性绑定到p元素上。 这样,你就成功地在Visual Studio Code引入Vue.js,并创建了一个简单的Vue应用。记得在你的HTML文件添加对Vue.js引用,并在JavaScript代码创建Vue实例时,确保选择正确的文件路径或CDN链接。 #### 引用[.reference_title] - *1* *3* [用VSCode搭建Vue.js开发环境及Vue.js第一个应用](https://blog.csdn.net/m0_61961937/article/details/129054401)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [新手入门Vue,在VScode使用Vue的两种办法](https://blog.csdn.net/weixin_51472145/article/details/123270971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值