使用WebStorm開發(fā)Vue3項目及其他問題詳解

更新時間：2025年02月25日 10:31:09 作者：泡泡Java

這篇文章主要介紹了在WebStorm中配置Vu3項目的詳細步驟,還解決了ElementPlus與Sass版本兼容性問題,并提供了詳細的配置和運行步驟,需要的朋友可以參考下

基本配置

打包工具：Vite
前端框架：ElementPlus
開發(fā)語言：Vue3、TypeScript、Sass
代碼檢查：ESLint、Prettier
IDE：WebStorm 2024.2

首先說一下版本兼容問題，ElementPlus>=2.8.5需要Sass>=1.79.0，但是升級了Sass后，會導致Element提示很多警告，猜測原因是因為Sass在后續(xù)版本修改了一些語法規(guī)則，而Element沒有跟進修改。這些警告雖然不影響代碼運行，但是看著糟心，目前只能等待官方后續(xù)更新了。

搭建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 #靜態(tài)文件
│  ├─ 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規(guī)則，后續(xù)在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 }) => {
	// 環(huán)境變量
    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.ts和components.d.ts，又因為AutoImport開啟了eslintrc，還會生成文件.eslintrc-auto-import.json

配置eslint：eslint.config.ts

目前使用的eslint9版本，配置文件與之前版本的寫法可能不一致。

注意：WebStorm2024版本才支持eslint9版本的配置文件。

創(chuàng)建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 } } },
    // 自定義規(guī)則
    {
        rules: {
            // 使用any類型時提示警告
            '@typescript-eslint/no-explicit-any': 'warn',
        },
    },
    eslintPluginPrettierRecommended,
];

由于目前unplugin-auto-import并不支持eslint9，所以需要導入.eslintrc-auto-import.json文件消除錯誤提示。
一般來說eslint-plugin-prettier的規(guī)則要放在最后，保證它的規(guī)則不會被覆蓋。
如果要增加更多規(guī)則，請查看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的規(guī)則可能不適合個人習慣，可以通過添加.prettierrc.json配置文件進行修改規(guī)則

{
  "semi": true, 	// 句尾增加分號
  "tabWidth": 4,	//使用4個空格縮進
  "singleQuote": true,	// 使用單引號
  "printWidth": 200,	// 超過200字符換行
  "arrowParens": "avoid",	// 單箭頭函數不加括號
  "bracketSameLine": true	// 對象前后增加空格
}

還有很多規(guī)則，可以查看prettier文檔。

環(huán)境變量env

創(chuàng)建文件.env、.env.development、.env.production分別對應默認配置、開發(fā)環(huán)境配置、生成環(huán)境配置

// .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",
    	...
	}
	...
}

更多有關環(huán)境變量的配置和使用，請查看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開發(fā)Vue3項目及其他問題的文章就介紹到這了,更多相關WebStorm開發(fā)Vue3項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue基于element-china-area-data插件實現省市區(qū)聯動
省市區(qū)聯動在日常開發(fā)中用的非常多，本文就介紹一下vue基于element-china-area-data插件實現省市區(qū)聯動，具有一定的參考價值，感興趣的可以了解一下
2022-04-04
詳解如何更好的使用module vuex
這篇文章主要介紹了詳解如何更好的使用module vuex，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
Vue中img的src是動態(tài)渲染時不顯示的解決
今天小編就為大家分享一篇Vue中img的src是動態(tài)渲染時不顯示的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue3中如何使用iframe嵌入vue2頁面
這篇文章主要介紹了vue3中如何使用iframe嵌入vue2頁面問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
修改Vue打包后的默認文件名操作
這篇文章主要介紹了修改Vue打包后的默認文件名操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue中props賦值給data出現的問題及解決
這篇文章主要介紹了vue中props賦值給data出現的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue.js整合vux中的上拉加載下拉刷新實例教程
這篇文章主要給大家介紹了關于vue.js整合vux中上拉加載下拉刷新的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2018-01-01
Vue2中的過濾器filter使用及注意說明
這篇文章主要介紹了Vue2中的過濾器filter使用及注意說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
詳解vue項目中使用vuedraggable
這篇文章主要介紹了vue項目中使用vuedraggable,本文給大家介紹了錯誤問題分析及解決方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-05-05
基于Vue.js實現一個完整的登錄功能
在現代Web應用中,用戶登錄功能是一個核心模塊,它不僅涉及到用戶身份驗證,還需要處理表單驗證、狀態(tài)管理、接口調用等多個環(huán)節(jié),本文將基于一個Vue.js項目中的登錄功能實現,深入解析其背后的技術細節(jié),幫助開發(fā)者更好地理解和實現類似功能,需要的朋友可以參考下
2025-02-02