当前位置：首页 > news >正文

使用WebStorm开发Vue3项目

news 来源：原创 2025/7/16 14:56:43

记录一下使用WebStorm开发Vu3项目时的配置

现在WebStorm可以个人免费使用啦！??

基本配置

打包工具：Vite
前端框架：ElementPlus
开发语言：Vue3、TypeScript、Sass
代码检查：ESLint、Prettier
IDE：WebStorm 2024.2

首先说一下版本兼容问题，ElementPlus>=2.8.5需要Sass>=1.79.0，但是升级了Sass后，会导致Element提示很多警告，猜测原因是因为Sass在后续版本修改了一些语法规则，而Element没有跟进修改。这些警告虽然不影响代码运行，但是看着糟心，目前只能等待官方后续更新了。

搭建Vue3项目

通过Vite搭建Vue3项目

npm create vite@latest my-vue-app -- --template vue-ts

my-vue-app为项目文件夹名称
vue-ts表示使用包含typescript的vue项目模板搭建

安装后的目录结构

├─ index.html
├─ package.json
├─ tsconfig.json #typescript配置文件
├─ tsconfig.app.json #typescript配置文件，本项目的ts配置，自动引用到tsconfig.json中
├─ tsconfig.node.json #typescript配置文件，为vite服务的ts配置，自动引用到tsconfig.json中
├─ vite.config.ts #vite配置文件
├─ src
│  ├─ assets #静态文件
│  ├─ components #组件
│  ├─ App.vue
│  ├─ main.ts

安装框架和其他工具包

修改项目根目录下的package.json文件，添加前端框架和其他依赖包

{"name": "my-vue-app","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.5.12","element-plus": "^2.8.1"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.4","typescript": "~5.6.2","vite": "^5.4.10","vue-tsc": "^2.1.8","sass": "^1.77.0","unplugin-auto-import": "^0.18.3","unplugin-vue-components": "^0.27.4","@eslint/js": "^9.13.0","@rushstack/eslint-patch": "^1.10.4","eslint-plugin-prettier": "^5.2.1","eslint-plugin-promise": "^6.6.0","eslint-plugin-vue": "^9.29.0","typescript-eslint": "^8.10.0","@vue/eslint-config-prettier": "^10.0.0","@vue/eslint-config-typescript": "^14.1.1"}
}

unplugin-auto-import和unplugin-vue-components为自动导入工具，可在编写代码时，可以无需import ref from 'vue'而直接使用ref，工具配置后会自动导入组件。
名称中包含eslint的依赖包为ESLint规则，后续在eslint.config.js中配置。
正如一开始所说，由于ElementPlus和Sass版本过高会出现警告的问题，所以目前安装的低版本，等待官方修复问题后，再升级版本。

运行安装依赖

npm install

如果安装时间过久，或者提示网络超时，可以切换npm源后再重新安装

# 切换为淘宝镜像
npm config set registry https://registry.npmmirror.com/

配置vite：vite.config.ts

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";
import Components from 'unplugin-vue-components/vite';
import path from 'path';export default defineConfig(({ mode }) => {// 环境变量const env = loadEnv(mode, process.cwd(), '');return {plugins: [vue(),AutoImport({// 自动导入的组件imports: ['vue', 'vue-router'],// 解析器：当前使用了ElementPlus的解析器resolvers: [ElementPlusResolver()],// 开启eslinteslintrc: { enabled: true },}),Components({// 解析器：当前使用了ElementPlus的解析器resolvers: [ElementPlusResolver({ importStyle: 'sass' })],// 以下文件夹中的组件自动导入dirs: ['src/components'],}),],resolve: {alias: {// 设置路径别名'@': path.resolve(__dirname, './src'),},},server: {// 网络请求代理proxy: {'/t/': {target: env.VITE_SERVER,changeOrigin: true,},},},};
});

运行项目

npm run dev

运行后会自动生成文件auto-imports.d.ts和components.d.ts，又因为AutoImport开启了eslintrc，还会生成文件.eslintrc-auto-import.json

配置eslint：eslint.config.ts

目前使用的eslint9版本，配置文件与之前版本的写法可能不一致。
注意：WebStorm2024版本才支持eslint9版本的配置文件。

创建eslint配置文件eslint.config.js

import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import autoImport from './.eslintrc-auto-import.json' assert { type: 'json' };export default [{ files: ['**/*.{js,mjs,cjs,ts,vue}'] },// 导入auto-import插件配置（目前暂不支持eslint9）{ files: ['**/*.{js,mjs,cjs,ts,vue}'], languageOptions: autoImport },pluginJs.configs.recommended,...tseslint.configs.recommended,...pluginVue.configs['flat/essential'],{ files: ['**/*.vue'], languageOptions: { parserOptions: { parser: tseslint.parser } } },// 自定义规则{rules: {// 使用any类型时提示警告'@typescript-eslint/no-explicit-any': 'warn',},},eslintPluginPrettierRecommended,
];

由于目前unplugin-auto-import并不支持eslint9，所以需要导入.eslintrc-auto-import.json文件消除错误提示。
一般来说eslint-plugin-prettier的规则要放在最后，保证它的规则不会被覆盖。
如果要增加更多规则，请查看eslint配置文档。

修改ts配置：tsconfig.app.json

修改ts配置，添加上一步自动生成的.d.ts文件，添加后就不会提示Vue的导入错误了。

# 在include中添加文件名
{"compilerOptions": {...}"include": [..., "auto-imports.d.ts", "components.d.ts"]
}

修改WebStorm设置

选择自动ESLint配置，编辑器会自动寻找根目录下的.eslint.config.js文件。
勾选eslint --fix会在保存文件时自动格式化代码。

修改后重启一下编辑器，或者重启语言服务中的两个服务。

完成后打开App.vue文件，删除import HelloWorld from './components/HelloWorld.vue'，并没有HelloWorld组件未导入的错误提示，则说明配置生效了。

配置prettier：.prettierrc.json

默认prettier的规则可能不适合个人习惯，可以通过添加.prettierrc.json配置文件进行修改规则

{"semi": true, 	// 句尾增加分号"tabWidth": 4,	//使用4个空格缩进"singleQuote": true,	// 使用单引号"printWidth": 200,	// 超过200字符换行"arrowParens": "avoid",	// 单箭头函数不加括号"bracketSameLine": true	// 对象前后增加空格
}

还有很多规则，可以查看prettier文档。

环境变量env

创建文件.env、.env.development、.env.production分别对应默认配置、开发环境配置、生成环境配置

// .env.development
VITE_SERVER = http://dev.xxx.com
// .env.production
VITE_SERVER = http://pro.xxx.com

修改打包命令

// package.json
{..."scripts":{..."build": "vite build --mode production","build-dev": "vite build --mode development",...}...
}

更多有关环境变量的配置和使用，请查看vite文档。

其他问题

为什么用了ESLint还要用Prettier，两者分别有什么作用？
Prettier用于格式化代码，确保缩进、分号、引号、换行等代码格式一致；ESLint则用于代码语法检测，提示错误。
换行符的问题
Windows系统使用的换行符为CRLF(/r/n)，而Linux和MacOS使用的是LF(/n)，为了统一，可在.prettierrc.json中添加"endOfLine": "lf"，同时需要修改git配置git config --global core.autocrlf input，表示在提交时将CRLF转换为LF，在检出时不进行转换。默认git会在检出时自动转换为CRLF，此时就会与当前的代码格式不一致，可能会导致冲突。

使用WebStorm开发Vue3项目

记录一下使用WebStorm开发Vu3项目时的配置现在WebStorm可以个人免费使用啦！?? 基本配置打包工具：Vite 前端框架：ElementPlus 开发语言：Vue3、TypeScript、Sass 代码检查：ESLint、Prettier IDE：WebSt…...

编程日记 2025/7/16 14:56:43

Mac 录制电脑系统内的声音的具体方法？

1.第一步：下载BlackHole 软件方式1：BlackHole官方下载地址方式2： 百度云下载提取码: n5dp 2.第二步：安装BlackHole 双击下载好的BlackHole安装包，安装默认提示安装。 3.第三步：在应用程序中找到音频…...

编程日记 2025/7/16 14:50:11

计算机网络

1.网络协议是什么？ 在计算机网络要做到有条不紊地交换数据，就必须遵守一些约定好的规则，比如交换数据地格式，是否需要发送一个应答信息。这些规则被称为网络协议。分层结构应用层：为计算机用户提供服务表示层&…...

编程日记 2025/7/15 19:49:12

爬取某市KFC餐厅信息（POST请求+PYMYSQL）

# 简介本教程将指导您如何使用Python爬取石家庄市的KFC门店信息，并将这些信息存储到MySQL数据库中。我们将使用requests库来发送网络请求，pymysql库来操作MySQL数据库。环境准备在开始之前，请确保您已经安装了以下Python库&#xff1a…...

编程日记 2025/7/15 15:26:04

109.【C语言】数据结构之二叉树层序遍历

目录 1.知识回顾 2.代码实现准备工作 LevelOrder函数代码框架关键代码 3.执行结果 1.知识回顾层序遍历参见106.【C语言】数据结构之二叉树的三种递归遍历方式文章截取的部分内容定义:按层的方式遍历(,设n为树的深度,h1-->h2-->h3-->...-->hn) 以下面…...

编程日记 2025/7/16 14:31:28

Java转C之内存管理

从 Java 转向 C 语言开发，内存管理和指针是两个核心且关键的概念。这些概念在 Java 中被抽象和自动化处理，而在 C 语言中则需要开发者手动管理和操作。目录内存管理概述指针基础指针的定义与初始化地址运算符 & 和解引用运算符 *指针运算动态内…...

编程日记 2025/7/15 21:58:49

共享内存和信号量

一、共享内存原理 1、基础前提共享内存是为了进程之间通信服务的。进程间的通信的核心是要让两个不同的进程看到同一份资源。之前的匿名管道通过父子进程继承的关系，让父子进程看到同一份资源，进而进行通信；命名管道则是通过唯一的路径让两…...

编程日记 2025/7/13 8:21:32

SED命令

基本用法： sed命令具体应用： 1.删除第2-5行 nl regular_express.txt | sed 2d结果： 2.在第二行之后新增两行，分别为"drink tea…" 和"drink beer?" nl regular_express.txt | sed 2 a\ drink tea...\…...

编程日记 2025/7/15 12:05:20

洛谷 P6368 [COCI2006-2007#6] MAGIJA C语言

题目：https://www.luogu.com.cn/problem/P6368 题目背景知名魔术师 AlDimi Kartimi 需要你帮助他来设计他扑克牌的背面图案。题目描述众所周知，扑克牌的背面是一个矩形，通过做两边的中垂线可以将矩形分成相等的四部分。 AlDimi Karti…...

编程日记 2025/7/16 8:01:39

Picker 选择器 API文档地址单列选择器用法 /// view onTap:(){TDPicker.showMultiPicker(context,data: [controller.coinList],title: ,rightTextStyle: TextStyle(color: AppColors.ColorMain),onConfirm: (selected) {controller.onTapCoin(selected);Navigator.of(contex…...

编程日记 2025/7/16 14:24:42

LLMs之Agent之Lares：Lares的简介、安装和使用方法、案例应用之详细攻略

LLMs之Agent之Lares：Lares的简介、安装和使用方法、案例应用之详细攻略导读：这篇博文介绍了 Lares，一个由简单的 AI 代理驱动的智能家居助手模拟器，它展现出令人惊讶的解决问题能力。 >> 背景痛点：每天都有新的…...

编程日记 2025/7/16 14:17:36

实验3-实时数据流处理-Flink

1.前期准备 （1）Flink基础环境安装参考文章： 利用docker-compose来搭建flink集群-CSDN博客显示为这样就成功了 （2）把docker，docker-compose，kafka集群安装配置好参考文章： …...

编程日记 2025/7/15 4:52:18

axios笔记

一、axios是什么前端最流行的ajax请求库二、json-server json-server可以帮助我们搭建http服务为什么要搭建http服务？ ：是因为我们用axios的时候，需要向服务端发送请求我们需要服务端这样一个角色，来与axios结合做实践 1.…...

编程日记 2025/7/12 6:17:12

python拆分Excel文件

按Sheet拆分Excel 或按照某一列的不同值拆分Excel。文档样式如下： 结果：红色是按照Sheet名拆出的，蓝色和橙色是某个Sheet按照某列的不同值拆分的。代码： # -*- coding: utf-8 -*- """ 拆分excel文件——按照…...

编程日记 2025/7/11 8:43:49

使用IntelliJ IDEA开发Gradle插件并发布到本地

博主所用软件版本为： IntelliJ IDEA 2024.1.4 (Community Edition) Android Studio Ladybug Feature Drop | 2024.2.2 Beta 1 1、制作gradle插件（IntelliJ IDEA 2024.1.4） 新建groovy工程，File–>New–>Project… 右键点…...

编程日记 2025/7/13 13:10:07

C# 通过smtp发送邮件（配置好了参数可以直接用）

可以直接用 using System; using System.Net; using System.Net.Mail;class EmailSender {// 发送邮件的函数，接收SMTP配置作为参数public static void SendEmail(string smtpServer, int smtpPort, string senderEmail, string senderPassword, string subject, s…...

编程日记 2025/7/13 18:25:20

【数据结构】栈和队列

目录 1.栈 1.1.栈的概念及结构 1.2.栈的实现 2.队列 2.1.队列的概念及结构 2.2.队列的实现 3.运用栈理解一道题 4.使用两个队列实现一个栈 1.栈 1.1.栈的概念及结构首先，我们来了解一种新的数据结构——栈。栈是一种特殊的线性表，其只允许在固…...

编程日记 2025/7/15 15:00:51

使用 Spring Doc 为 Spring REST API 生成 OpenAPI 3.0 文档

Spring Boot 3 整合 springdoc-openapi 概述 springdoc-openapi 是一个用于自动生成 OpenAPI 3.0 文档的库，它支持与 Spring Boot 无缝集成。通过这个库，你可以轻松地生成和展示 RESTful API 的文档，并且可以使用 Swagger UI 或 ReDoc 进行…...

编程日记 2025/7/16 10:36:23

网络数据库安全和数据安全概述

1、数据安全的三要素完整性，机密性，可用性 2、安全技术和措施数据完整性技术、数据备份和恢复技术、数据加密技术、访问控制技术、用户管理和身份验证技术 3、数据库安全数据库安全是指数据库的任何部分都不允许受到侵害，或未经授权的…...

编程日记 2025/7/15 10:12:20

STM32F10X与GD32工程创建区别

1.宏定义区别 GD32虽然与STM32F10X的管脚兼容，但是用keil创建工程时，GD32在选择芯片型号的时候就已经自己定义了宏。STM32F10x需要手动定义宏。在以下界面定义用到的单片机。 2.时钟区别。GD32最大时钟为120Mhz,所用的hal库里面的系统初始化会初始化时钟…...

编程日记 2025/6/28 18:32:06

cmakelist使用总结

支持能编译成在不同系统上运行程序的方法我们代码就一份，但有时需要编译成arm32，有时需要编译成x86_64,或更多 1、首先先将代码定义一个名称： #将所有的源文件列为一个集合，集合名字叫做SRC_LISTS set(SRC_LISTS main.cpp A.cpp…...

编程日记 2025/7/15 17:12:08

【论文阅读】国际开源发展经验及其对我国开源创新体系建设的启示

作者：包云岗老师包云岗老师是计算机体系结构方向的大牛，推动了体系结构方面的开源事业! 欢迎对本栏目感兴趣的人学习"一生一芯"~ 学习体会： 承接前文，唐志敏老师讲到已有的软硬件生态系统和开发成本制约了对新结构的探…...

编程日记 2025/7/16 11:11:20

React 初学者指南：从零开始构建第一个 React 应用

React 是一个用于构建用户界面的 JavaScript 库，它能够让我们高效地构建复杂的 UI。对于 React 初学者来说，最重要的就是理解它的基本概念以及如何开始使用它。本文将引导你从零开始构建你的第一个 React 应用 1.1. 安装 React 环境首先&#xff0c…...

编程日记 2025/7/15 21:18:59

力扣93题：复原 IP 地址

力扣93题：复原 IP 地址（C语言实现详解） 题目描述给定一个只包含数字的字符串 s，复原它并返回所有可能的 IP 地址格式。有效的 IP 地址需满足以下条件： IP 地址由四个整数（每个整数位于 0 到 255 之间…...

编程日记 2025/7/12 23:48:47

字符编码发展历史

文章目录发展历史- ASCII- ISO-8859- Unicode- UTF系列- UTF-8- UTF-16- UTF-32 - 中文编码- GB2312- GBK- GB18030 - 其他编码归纳总结发展历史计算机的基础是二进制数字（0和1）。虽然人类日常使用的是各种字符（如字母、数字、符号等&am…...

编程日记 2025/7/14 15:25:11

aws codepipeline + github + sonarqube + jenkins实践CI/CD

https://blog.csdn.net/u011564831/article/details/144007981文章浏览阅读1.2k次，点赞31次，收藏21次。本文使用 Jenkins 结合 CodeBuild, CodeDeploy 实现 Serverless 的 CI/CD 工作流，用于自动化发布已经部署 lambda 函数。在 AWS 海外区&a…...

编程日记 2025/7/14 9:50:28

KNN_识别图片数字

1.实验过程省略灰度化处理过程，用已经处理好的txt数据进行训练 3.jpg from PIL import Image def imgtotxt(imgfile,txtfile,size (32,32)):image_file Image.open(imgfile).resize(size,Image.LANCZOS).convert(L)width,height image_file.sizef open(txtfile,…...

编程日记 2025/7/14 10:07:34

python 清华pip镜像源报HTTP error 403

报错信息 ERROR: HTTP error 403 while getting https://mirrors.tuna.tsinghua.edu.cn/pypi/web/packages/52/79/a64937a2185b91a96cc5406e3ea58120980c725543d047e112fb3084a972/fake_useragent-2.0.0-py3-none-any.whl (from https://mirrors.tuna.tsinghua.edu.cn/pypi/we…...

编程日记 2025/7/1 19:53:47