vscode 之 vue项目如何使用ctrl+鼠标左键跳转对应文件

话不多说,直接步入正题

使用项目工程的jsconfig.json

  • 直接在项目中使用jsconfig.json/tsconfig.json文件配置(项目中没有相应的文件的添加文件,有文件的添加"paths": {"@/*": ["./src/*"]}配置即可)
{  
  "compilerOptions": {  
    "target": "ES6",  
    "module": "commonjs",  
    "paths": {
      "@/*": ["./src/*"]
    } 
  },  
  "include": [  
    "src/**/*"  
  ],  
  "exclude": [  
    "node_modules"  
  ]  
}

这种直接在项目中使用jsconfig.json/tsconfig.json文件配置的方法,更加适用于团队协作开发

用户自定义安装插件

  • 使用vscode插件,并在vscodesetting.json文件中配置
  1. 别名路径跳转(setting.json配置看插件细节说明)在这里插入图片描述
  2. path-alias(setting.json配置看插件细节说明)
    在这里插入图片描述
    例如配置:
    setting.json
"pathAlias.aliasMap": {
    "@": "${cwd}/src"
},
  1. Vue Jumper(不需要额外的在settings.json中配置什么,用插件默认的配置也可以)
    在这里插入图片描述
    这个插件文档说明使用中文说明文档,友好阅读,不使用插件自带的配置,可以自行按照文档说明进行相关的插件配置。
  • 使用这三个插件的任意一个都可以,使用前两个插件的话是ctrl+点击from后面的路径,不能点击import后面的变量名Vue jumper可以直接点击template 的自定义的组件名称以及import 后面的变量名然后跳转到文件,并不是快速跳转到对应变量声明的位置。
  • 使用插件的方式更加偏向于用户使用的自定义安装插件,并不适合于团队协作,毕竟设置的setting.json文件是存在用户电脑的vscode里面的,并没有在代码项目工程上。
对于在VSCode中配置Vue3、Vuex和Uniapp的开发环境,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了Node.js和npm(Node.js的包管理器)。你可以在官网上下载并安装它们。 2. 接下来,你需要全局安装Vue CLI。在命令行中执行以下命令: ``` npm install -g @vue/cli ``` 3. 创建一个新的Vue项目。在命令行中进入你想要创建项目的目录,并执行以下命令: ``` vue create your-project-name ``` 根据提示选择你需要的特性和插件,包括Vuex,以及是否使用TypeScript等。 4. 安装Uniapp插件。在命令行中进入项目目录,并执行以下命令: ``` vue add uni-app ``` 根据提示选择适用于你的平台(如H5、微信小程序等)以及是否使用TypeScript等。 5. 配置Vuex。在项目目录中找到src目录,然后创建一个store目录,在其中创建一个index.js文件。在index.js中编写你的Vuex配置,例如: ```javascript import { createStore } from 'vuex' const store = createStore({ state: { // 状态 }, mutations: { // 修改状态的方法 }, actions: { // 异步操作 }, getters: { // 计算属性 } }) export default store ``` 然后,在src目录的main.js中引入Vuex并使用它: ```javascript import { createApp } from 'vue' import App from './App.vue' import store from './store/index' createApp(App).use(store).mount('#app') ``` 6. 在VSCode中打开你的项目,在扩展商店中搜索并安装VueVuex和Uniapp相关的插件,例如"Vetur"和"uniapp-snippet"等。这些插件将提供语法高亮、代码提示和其他开发工具。 现在,你已经成功配置了VSCode中的Vue3、Vuex和Uniapp开发环境。你可以开始开发你的项目了。祝你好运!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zhuangv

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值