在WebStorm中设置vue相对导入

最新推荐文章于 2024-12-11 14:24:03 发布

原创最新推荐文章于 2024-12-11 14:24:03 发布 · 664 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍在VUE项目中如何使用@符号简化相对路径导入，通过配置resolve.alias实现，同时指导如何在WebStorm中进行相应设置以确保代码正确解析。

开发十年，就只剩下这套架构体系了！ >>>

在VUE中通常使用@来处理相对导入问题,配置代码如下:

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  }

使用此配置之后需要在webstorm中做相关配置才可以正常访问.设置如图:

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_36646275

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue.js在前端跨平台开发中的应用

小白菜的博客

04-24

893

随着移动互联网和多端设备的普及，前端开发面临着为不同平台（如Web、iOS、Android）开发应用的需求。传统的单平台开发方式效率低下，成本较高。前端跨平台开发应运而生，旨在通过一套代码实现多平台的部署和运行。Vue.js作为一款轻量级、易于上手且功能强大的前端框架，在跨平台开发中展现出了巨大的潜力。本文的目的在于全面探讨Vue.js在前端跨平台开发中的应用，涵盖其原理、实现步骤、实际案例以及未来发展等方面，为开发者提供系统的知识和实践指导。

webstorm+vue初始化项目的方法

12-12

vue新项目准备： 1、安装nodejs，官网下载傻瓜安装 node -v 验证 2、npm包管理器，是集成在node中的，所以安装了node也就有了npm npm -v 验证 3、安装cnpm npm install -g cnpm –registry=http://registry.npm.taobao.org （完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。） 4、安装vue-cli脚手架构建工具 npm install -g vue-cli vue新项目构建： 1、初始化项目模板： vue init webpack-simp

参与评论您还未登录，请先登录后发表或查看评论

用webstorm搭建vue项目

热门推荐

weixin_40760196的博客

04-15

10万+

本文只针对新手。首先要明白几个名词（概念）。 Node.js： Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。 npm： npm全称为Node Package Manager，是一个基于No...

Vue的安装并在WebStorm中运行

weixin_30814319的博客

05-23

237

一、Vue的安装需要两个支持分别为：nodejs、npm 　　Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。　　Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。　　Node.js 的包管理器 npm，是全球最大的开源库生态系统。　　npm全称为Node Package Manager，是一个基于Node.js的包...

WebStorm + Vue 跳转到文件，解决@符号引入无法跳转的问题

qq_42853039的博客

10-28

4033

WebStorm + Vue 跳转到文件，解决@符号引入无法跳转的问题WebStorm + Vue 跳转到文件，解决@符号引入无法跳转的问题 WebStorm + Vue 跳转到文件，解决@符号引入无法跳转的问题在项目根目录下创建webpack.config.js文件 'use strict' const path = require('path') module.exports = { context: path.resolve(__dirname, './'), resolve: {

让phpstorm/webstorm 识别vue等项目中的@路径并且智能提示

qq_25691983的博客

10-26

1337

phpstorm配置import导入文件时，智能路径提示

在VUE中给src设置别名的作用

12-28

在 Vue 项目中配置 `src` 文件夹的别名为 `@` 主要是为了简化导入路径并提高开发效率。具体来说： #### 提高可读性和维护性当在一个大型项目中工作时，组件和其他资源之间的相对路径可能会变得非常复杂和难以管理...

WebStorm 2024.2.5 vue页面import写@/api/teacher/teacherMaintain无法跳转怎么解决

09-02

我们正在解决WebStorm 2024.2.5中在Vue页面里使用`import '@/api/teacher/teacherMaintain'`无法跳转的问题。根据引用[1][2][3][4][5]的内容，以及Vue项目中的常见实践，我们可以从以下几个方面进行排查和解决： ##...

WebStorm中npm报错及Node Sass问题解决方案

在使用WebStorm进行Vue前端项目开发的过程中，开发者经常会遇到与npm相关的各种报错问题，尤其是在Windows 10操作系统环境下。本文围绕“WebStorm npm报错解决”这一核心主题，深入剖析了从环境搭建、依赖安装到具体...

在vue文件中import 别名失效

最新发布

11-12

根据用户提供的引用和问题描述，用户遇到的问题是：在Vue项目中配置了路径别名（如`@`指向`src`目录），但在`.vue`文件中使用时无法正确解析，导致导入失败。结合引用内容，问题可能涉及以下方面： 1. **Vite配置*...

解决webstorm vue import 引入问题：Module is not installed

CanXue6789的博客

04-29

4069

运行项目时发现有一个页面加载不出来，进入webstorm看到在import引入文件时给出一个Module is not installed的提示，按照提示方法进行安装发现安装失败，百度后发现因为安装的文件与我们本地安装的mpvue产生冲突，如果想继续安装只能先卸载之前安装的mpvue，我觉得太麻烦而且容易出错，然后选择换一种方式，直接百度Module is not installe...

vue开发环境搭建（WebStorm）

qingdao666666的博客

04-09

2250

vue开发环境搭建（WebStorm） https://blog.youkuaiyun.com/u013408061/article/details/88238592 一、安装Node.js，搭建Vue环境 1、访问Node.js官网（https://nodejs.org/en/download/）进行安装包下载。 2、下载成功之后运行安装程序，进行安装。如果是用安装程序进行安装，在安...

【Vue3-JavaScript】如何使用vue3创建一个基于【webstorm开发】自动提示和自动格式化代码规则的工程！

weixin_43343144的博客

10-23

2162

关于绝对路径和相对路径

Handsome2013的博客

03-16

831

关于绝对路径和相对路径 实际上相对路径也有两种吧，平时在webstorm，vscode等软件中，选中文件右键，会出现path和relative path,就是绝对路径和相对路径，但是这个相对路径是相对于项目源代码目录。平时也经常使用相对当前文件路径。（以下来自：https://zhidao.baidu.com/question/1836150297173371100.html）一种是相对...

使用 WebStorm 导入已有的 Vue 项目并运行的步骤与注意事项

web15085415935的博客

12-11

4306

本文将介绍如何使用 WebStorm 导入已有的 Vue 项目、运行步骤、注意事项、常见问题及解决方案，同时重点介绍如何管理 Vue 项目中 Node.js 与 npm 版本的对应关系。如前文所述，确保使用 nvm 管理的 Node.js 和 npm 版本与项目兼容，避免因版本不匹配导致的依赖安装问题。在开发不同 Vue 项目时，不同项目可能对 Node.js 和 npm 版本有不同的要求。管理不同版本的 Node.js 时，npm 版本会随之切换，确保项目使用合适的 npm 版本。文件，确保配置正确。

webstorm配置vue开发环境

到山顶去看看！

06-26

2579

🌳🌳🌳前言：本文章针对于如何用IDE和webstorm运行一个别人的vue项目进行步骤记录。

WebStorm导入vue无语法错误报红解决方案

weixin_45848554的博客

12-07

5404

如图当我们安装了WebStorm导入vue文件之后，无语法错误文件报红，我们可以按照以下步骤解决一、打开设置找到下图位置，将javascript语言版本更改成ECMAScript6+ 一般情况下，点击apply就可以解决报红的问题。可是我的电脑当时就不是一般情况下，如果你也是和我一样设置了这里还是报红，下面走第二部二、找到下图把这里的设置改成Disable Eslint即可 ...