在 WebStor轻松上手指南·中添加·如何在WS中使用Vue模板

作者：编程小白 | 发布时间：2025-07-03 |

打开 WebStorm，点击“新建项目”。选择“Node.js Express App”或空白项目，确保环境干净。给你的项目起个名，选个地方放它，然后点击“创建”按钮。

Vue CLI 是搭建 Vue.js 项目的利器。在 WebStorm 的终端窗口里，输入以下命令安装 Vue CLI：

npm install -g @vue/cli

安装完毕后，用这个命令检查一下是否成功：

vue --version

如果能看到版本号，说明安装成功了。

在终端里，找到你想创建项目的目录，然后输入以下命令：

vue create my-vue-project

你会被提示选择预设，默认的“default”预设就挺不错的。选好配置后，Vue CLI 会自动搞定项目结构和依赖。

在 WebStorm 中打开你的项目文件夹。找到 main.js 文件，运行下面的命令启动开发服务器：

npm run serve

然后打开浏览器，访问，你应该能看到 Vue 应用的欢迎页面。

WebStorm 对 Vue.js 的支持很棒，包括语法高亮、代码补全、错误检查等。确保你已经安装了 Vue.js 插件，然后在设置里检查 Vue.js 是否已经启用。

创建新的 Vue 组件：在 components 目录下创建新的 .vue 文件，比如 MyComponent.vue。

<template>
  <div>Hello Vue!</div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style>
/* 组件样式 */
</style>

配置路由：打开 router/index.js 文件，添加新的路由配置：

const routes = [
  {
    path: '/my-component',
    component: () => import('../components/MyComponent.vue')
  }
]

总结来说，在 WebStorm 中添加 Vue 模板的关键步骤包括：创建项目、安装 Vue CLI、创建 Vue 项目、打开并运行项目、使用 WebStorm 的 Vue 支持功能、添加组件和路由。

进一步建议：定期更新 Vue CLI 和 WebStorm，利用调试功能，学习和使用 Vue 的最佳实践。