WebStorm 是一款强大的 JavaScript IDE，适合开发现代前端框架的应用程序。本文将介绍如何在 WebStorm 中开发 UniApp，从安装到项目运行的完整流程。
1. 安装 WebStorm
首先，你需要从 JetBrains 的官网（JetBrains）下载并安装 WebStorm。在安装过程中，请选择适合你操作系统的版本，并按照提示完成安装。
2. 安装 HBuilderX
作为 UniApp 的官方开发工具，HBuilderX 提供了许多便利的功能。你可以从 DCloud 官网（DCloud）下载并安装 HBuilderX。虽然我们主要用 WebStorm 来开发，但 HBuilderX 在构建和调试时会非常有帮助。
3. 安装 Node.js
在使用 WebStorm 前，你需要确保安装了 Node.js。你可以从 Node.js 官方网站（Node.js）下载并安装。安装完成后，可以通过命令行输入以下命令检查 Node.js 是否安装成功：
node -v
npm -v
4. 创建 UniApp 项目
在安装完上述工具后，打开 HBuilderX，选择“文件”->“新建”->“项目”，然后选择“uni-app”进行项目创建。完成后，将项目导出到本地适合的路径。
5. 在 WebStorm 中打开 UniApp 项目
打开 WebStorm，选择“文件”->“打开”，然后选择你刚刚创建的 UniApp 项目目录。WebStorm 会自动识别项目结构，如 src 文件夹。
6. 配置项目
在 WebStorm 中，你需要确保相关的插件和配置已安装：
- 打开 “File” -> “Settings” -> “Plugins”，搜索并安装 Vue.js 和其他相关插件。
- 配置 ESLint、Prettier 等代码规范工具。
如果你的 UniApp 项目中已经包含这些工具的配置文件，WebStorm 会自动识别并应用。
7. 编写代码
在 src 目录下，你可以找到 pages 文件夹，里面放置着各个页面的代码。下面是一个简单的示例，展示如何编写一个 UniApp 页面。
pages/index/index.vue：
<template>
<view>
<text>{{ message }}</text>
<button @click="changeMessage">点击我</button>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello UniApp!'
}
},
methods: {
changeMessage() {
this.message = '你点击了按钮！'
}
}
}
</script>
<style>
text {
font-size: 20px;
margin: 20px;
}
button {
padding: 10px;
background-color: #007AFF;
color: white;
}
</style>
8. 运行项目
在 WebStorm 中，进入终端（Terminal），你需要运行以下命令安装依赖：
npm install
安装完成后，可以通过以下命令启动项目：
npm run dev:%PLATFORM%
注意：%PLATFORM% 可以替换为 h5、mp-weixin 等平台，根据你要运行的目标而定。
9. 预览和调试
你可以使用 HBuilderX 提供的运行按钮进行预览，或者如果你在 WebStorm 中配置了调试工具，也可以直接在 WebStorm 中进行调试。
通过上述步骤，你就可以在 WebStorm 中顺利地开发 UniApp 项目。在实际开发中，你会发现 WebStorm 强大的代码提示和补全功能，可以大大提高开发效率。希望这篇文章能帮助你顺利上手 UniApp 开发！
