webstorm使用vite创建vue3项目

### 创建 Vue 3 项目并配置 Vite 和 WebStorm 为了在 WebStorm 中使用 Vite 创建 Vue 3 项目，可以按照以下说明操作： #### 安装依赖包 首先，在命令行工具中初始化一个新的 npm 项目，并安装必要的开发依赖项。 ```bash npm init -y npm install vite vue@next @vitejs/plugin-vue --save-dev ``` 这会设置好基础环境来支持基于 Vite 的 Vue 3 应用程序构建过程[^2]。 #### 初始化 TypeScript 支持 如果希望加入 TypeScript，则还需要额外安装 `typescript` 及其对应的 Vue 插件： ```bash npm install typescript vue-tsc --save-dev ``` 接着更新 `package.json` 文件中的脚本部分以便于后续编译和运行应用程序: ```json { "scripts": { "dev": "vite", "build": "vite build", "serve": "vite preview" } } ``` 对于 TypeScript 类型定义的支持可以通过编辑 `tsconfig.json` 来实现。确保此文件存在于项目的根目录下，并包含如下内容以适应 Vue 单文件组件 (SFC): ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": ".", "types": [ "webpack-env" ], "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue" ], "exclude": [ "node_modules" ] } ``` #### 设置 Vite 配置 创建或修改现有的 `vite.config.ts` 文件用于自定义 Vite 行为。这里展示了一个简单的例子，其中包含了对 `.env` 文件的支持以及路径别名的处理方式： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': '/src', }, }, }) ``` #### 添加 ESLint 和 Prettier 规则 为了让代码风格更加统一美观，建议集成静态分析工具如 ESLint 和代码格式化器 Prettier。通过调整 `eslint` 配置使得两者能够和谐共存而不互相干扰[^4]: ```json { "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } } ``` 同时可以在 package.json 中添加一个 script 方便执行 prettier 对整个 src 目录下的特定类型的文件进行自动格式化[^3]: ```json "scripts": { ... "format": "prettier --write \"./src/**/*.{html,vue,ts,js,json,md}\" --config ./.prettierrc.json" }, ``` 完成上述步骤之后就可以顺利地在 WebStorm 下启动新建立好的 Vite + Vue 3 工程了。记得重启 IDE 让所有的更改生效。