webstorm如何创建vue 3.js 📅 2026/7/24 11:43:56 在 WebStorm 中创建一个 Vue 3.js 项目你可以使用 Vue CLI、Vite 或其他现代工具。下面我将分别介绍如何使用 Vue CLI 和 Vite 来创建 Vue 3.js 项目。方法1使用 Vue CLI安装 Vue CLI如果尚未安装打开终端Terminal并运行以下命令来全局安装 Vue CLInpm install -g vue/cli创建新的 Vue 3 项目使用 Vue CLI 创建一个新的 Vue 3 项目。在终端中运行以下命令vue create my-vue-project这里 my-vue-project 是你的项目名称你可以根据需要更改它。选择 Vue 3 配置在创建项目的过程中Vue CLI 会询问你一些配置选项。选择或确认以下选项以配置为 Vue 3选择 Vue 3如果你使用的是 Vue CLI 4.5 或更高版本默认就是 Vue 3。选择一个预设例如 Babel, ESLint 等。确认是否需要使用 Class-style component compositions 或其他特性。进入项目目录创建完成后进入你的项目目录cd my-vue-project运行项目启动你的 Vue 应用npm run serve这将在本地服务器上启动你的应用通常在 http://localhost:8080 上。方法2使用 ViteVite 是另一种快速启动 Vue 项目的工具尤其适合开发现代前端应用。安装 Vite如果尚未安装打开终端并运行以下命令来全局安装 Vitenpm install -g create-vite创建新的 Vite Vue 项目使用 Vite 创建一个新的 Vue 项目npm create vitelatest my-vue-project -- --template vue这里 my-vue-project 是你的项目名称--template vue 指定了使用 Vue 模板。进入项目目录并安装依赖进入你的项目目录并安装所有依赖cd my-vue-projectnpm install运行项目启动你的 Vue 应用npm run dev这将在本地服务器上启动你的应用通常在 http://localhost:5173 上。在 WebStorm 中打开项目无论你选择哪种方法创建好项目后你可以在 WebStorm 中打开它打开 WebStorm。选择 File Open。浏览到你的项目目录例如 my-vue-project选择它并点击 OK。现在你可以开始在 WebStorm 中编码和调试你的 Vue 3 应用了。