使用WebStorm开发Vue3项目

news2024/11/5 18:27:19

记录一下使用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
  1. my-vue-app为项目文件夹名称
  2. 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"
  }
}
  1. unplugin-auto-importunplugin-vue-components为自动导入工具,可在编写代码时,可以无需import ref from 'vue'而直接使用ref,工具配置后会自动导入组件。
  2. 名称中包含eslint的依赖包为ESLint规则,后续在eslint.config.js中配置。
  3. 正如一开始所说,由于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()],
                // 开启eslint
                eslintrc: { 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.tscomponents.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,
];

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

其他问题

  1. 为什么用了ESLint还要用Prettier,两者分别有什么作用?
    Prettier用于格式化代码,确保缩进、分号、引号、换行等代码格式一致;ESLint则用于代码语法检测,提示错误。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2230205.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java已死,大模型才是未来?

作者:不惑_ 引言 在数字技术的浪潮中,编程语言始终扮演着至关重要的角色。Java,自1995年诞生以来,便以其跨平台的特性和丰富的生态系统,成为了全球范围内开发者们最为青睐的编程语言之一 然而,随着技术的…

Allegro: 开源的高级视频生成模型

我们很高兴地宣布 Allegro 的开源发布,这是 Rhymes AI 先进的文本到视频模型。Allegro 是一款功能强大的人工智能工具,能将简单的文字提示转化为高质量的视频短片,为人工智能生成视频领域的创作者、开发者和研究人员开辟了新的可能性。我们希…

【OD-支持在线评测】智能驾驶(200分)

📎 在线评测链接 https://app5938.acapp.acwing.com.cn/contest/11/problem/OD1073 🍓 OJ题目截图 🍿 最新机试E卷,全、新、准,题目覆盖率达 95% 以上,支持题目在线评测,专栏文章质量平均 94 分 🌍 评测功能需要 ⇒ 订阅专栏 ⇐ 后私信联系解锁~ 文章目录 📎…

SpringBoot【实用篇】- 配置高级

文章目录 目标:1.ConfigurationProperties2.宽松绑定/松散绑定3. 常用计量单位绑定4.数据校验 目标: ConfigurationProperties宽松绑定/松散绑定常用计量单位绑定数据校验 1.ConfigurationProperties ConfigurationProperties 在学习yml的时候我们了解…

构造小练习

一。 二。 构造函数的调用顺序: 先走全局,再main函数,而局部静态的函数是走到它那里才开始初始化。所以先构造C,再A,B,最后D。 析构函数的顺序: 先析构局部的,再析构全局的。后定义的先析构。…

openapi回调地址请求不通过

目录 1. 验证url接口get请求本地自测报错 2. 测试回调模式成功不返回结果 3. 测试回调模式返回结果带双引号 对接企业微信 产生会话回调事件 接口问题解决 1. 验证url接口get请求本地自测报错 java.lang.IllegalArgumentException: Last encoded character (before the pa…

探索Unity:从游戏引擎到元宇宙体验,聚焦内容创作

unity是实时3D互动内容创作和运营平台,包括游戏开发、美术、建筑、汽车设计、影视在内的所有创作者,借助Unity将创意变成现实。提供一整套完善的软件解决方案,可用于创作、运营和变现任何实时互动的2D和3D内容,支持平台包括手机、…

数据结构与算法实验练习(三)(排序及线性表的应用)

数据结构与算法分析课下实验练习,现记录一下解答过程,欢迎大家批评指正。 声明:本题目来源于西安交通大学电信学院原盛老师,任何单位或个人在使用、转载或引用本题目时,请务必标明出处为“西安交通大学电信学院原盛老…

mac|安装redis及RedisDesk可视化软件

一、安装 通过Homebrew安装 brew install redis 在安装过程可以得到以下信息: 1、启动redis或重新登陆redis brew services start redis 如果只想在前端运行,而不是在后端,则使用以下命令 /opt/homebrew/opt/redis/bin/redis-server /opt…

基于hive分析Flask为后端框架echarts为前端框架的招聘网站可视化大屏项目

基于hive分析Flask为后端框架echarts为前端框架的招聘网站可视化大屏项目 1. 项目概述 项目目标是构建一个大数据分析系统,包含以下核心模块: 1、数据爬取:通过request请求获取猎聘网的就业数据。 2、数据存储和分析:使用 Hive …

Rust 力扣 - 2841. 几乎唯一子数组的最大和

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们遍历长度为k的窗口,用一个哈希表记录窗口内的所有元素(用来对窗口内元素去重),我们取哈希表中元素数量大于等于m的窗口总和的最大值 题解代码 use std::coll…

Blender进阶:贴图与UV

9 UV 9.1 贴图与UV UV,指定每个面顶点在贴图上的坐标 演示: 1、添加物体 2、添加贴图,即图片纹理节点 3、进入UV Edit工作区 4、右边,选择一个面 5、左边,选择一个面,移动这个面 9.2 电子表格 电子…

UiPath调用Python脚本的完整示例

一、主要步骤: 1、创建Python脚本 2、安装UiPath.Python.Activities库 3、使用方法: a、添加python作用域 b、加载python脚本 c、调用python方法 d、获取python对象 e、显示Python结果的消息对话框 二、详细步骤 1、安装UiPath.Python.Activities库 …

[pdf,epub]105页《分析模式》漫谈合集01

105页的《分析模式》漫谈合集第1集的pdf、epub文件,已上传到本账号的CSDN资源。 如果无法下载,也可以访问umlchina.com/url/ap.html 已排版成适合手机阅读,pdf的排版更好一些。 ★UMLChina为什么叒要翻译《分析模式》? ★[缝合故…

科技资讯|谷歌Play应用商店有望支持 XR 头显,AR / VR设备有望得到发展

据 Android Authority 报道,谷歌似乎正在为其 Play 商店增加对 XR 头显的支持。该媒体在 Play 商店的代码中发现了相关的线索,包括一个代表头显的小图标以及对“XR 头显”的提及。 谷歌也可能改变了此前拒绝将 Play 商店引入 Meta Quest 头显的决定。今…

ES跟Kafka集成

配合流程 1. Kafka作为分布式流处理平台,能够实时收集和处理不同数据源的数据流; 2. 通过Kafka Connect或者Logstash等中间件,可以将Kafka中的数据流实时推送到Elasticsearch中; 3. Elasticsearch接收到数据后,会根据…

查缺补漏----关于计组两道题辨析

答案:A 指令字由操作码、寻址特征和地址码三个字段组成,寻址特征字段用来指明指令属于哪种寻址方式。若寻址方式是寄存器直接寻址,则地址码所指的通用寄存器中存放的是操作数,若寻址方式是寄存器间接寻址,则对应通用寄…

uniapp学习(010-2 实现抖音小程序上线)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战,开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第113p的内容 文章目录 抖音小程序下载抖音开发者工具先去开发者工具里进行测试 抖音开放平台配置开始打包上传…

[Approaching any Machine Learning] Supervised vs unsupervised learning - Note

Page 11 single_image pixel_values[1, :].reshape(28, 28) plt.imshow(single_image, cmapgray)用这个代码运行是会出错的,应该改为以下代码: pixel_np pixel_values.iloc[1, :].values single_image pixel_np.reshape(28, 28) plt.imshow(single_…

buu easyRE

这道题目我想写的东西不是很多,前面的部分按常规流程走,第一步我们写逆脚本,推算出数组v15的值,但是输出值却没有啥用,只是告诉我们,the first parts are flag ,没多大用,然后后…