打开WebSt并创建新项目比如终端会显示服务器的启动信息包括端口号和本地访问地址

作者：网络发烧程序猿 | 发布时间：2025-07-09 |

打开你的WebStorm软件。如果你是第一次使用，可以直接创建一个新项目。

点击“创建新项目”按钮，然后选择“Vue.js”作为项目类型。选择你想要的Vue版本，比如Vue CLI或者Nuxt.js，然后输入项目名称和位置，最后点击“创建”。

打开WebStorm内置的终端。如果你还没有安装Vue CLI，需要先安装它。

在终端中输入命令来安装Vue CLI：`npm install -g @vue/cli`。

安装完成后，你可以使用Vue CLI来创建和管理Vue项目。接下来，使用以下命令创建项目：`vue create my-vue-project`。

按照提示选择项目模板和配置，然后等待安装完成。

在WebStorm中打开你刚刚创建的Vue项目文件夹。

确保项目依赖安装完成，可以在终端中运行命令：`npm install`。

配置开发服务器，你需要打开项目的`vue.config.js`文件，确保其中有如下配置：

 { "devServer": { "host": "localhost", "port": 8080, "open": true } }

在终端中运行以下命令启动开发服务器：`npm run serve`。

终端会显示服务器的启动信息，包括端口号和本地访问地址。

打开浏览器，访问终端中显示的地址，比如你将看到你的Vue项目正在运行。

在WebStorm中启动Vue项目的主要步骤包括：创建新项目、安装依赖、配置项目、启动开发服务器。确保你的开发环境中有Node.js和npm是成功的关键。