### 配置 WebStorm 2023.3.8 开发 UniApp 项目 在 WebStorm 2023.3.8 中配置并创建 UniApp 项目需要进行一系列设置，以确保开发环境能够正常识别和运行 UniApp 项目。以下是详细的配置说明： #### 1. 安装 Node.js 和 Vue CLI 确保本地已安装 Node.js 和 Vue CLI，因为 UniApp 是基于 Vue.js 的跨平台开发框架。如果尚未安装，请通过以下命令安装： ```bash npm install -g @vue/cli npm install -g @vue/cli-service-global ``` 安装完成后，可以通过以下命令检查版本是否正确： ```bash vue --version ``` #### 2. 创建 UniApp 项目 使用 Vue CLI 创建一个新的 UniApp 项目： ```bash vue create -p dcloudio/uni-preset-vue my-uniapp-project ``` 上述命令会自动初始化一个 UniApp 项目，并将其命名为 `my-uniapp-project`[^1]。 #### 3. 打开项目并配置 WebStorm 打开 WebStorm 2023.3.8，选择“Open”菜单，然后加载刚刚创建的 UniApp 项目文件夹。接下来进行以下配置： ##### 3.1 配置 JavaScript 和 Webpack 进入 WebStorm 设置界面： - 路径：`Preferences > Languages & Frameworks > JavaScript > Webpack` - 将 Webpack 配置模式改为“Manually（手动）”，并在目录中选择当前项目的 `node_modules/@vue/cli-service/webpack.config.js` 文件[^1]。 ##### 3.2 安装必要的插件 为了提升开发体验，建议安装以下插件： - **Gitee 一键上传**：方便将代码快速上传至 Gitee 平台。 - **.ignore 插件**：右键可以直接将忽略文件加入 `.ignore` 文件中，并自动生成 `.ignore` 文件夹[^3]。 - **Rainbow Brackets**：为括号添加不同颜色，便于区分嵌套结构。 - **One Dark Theme**：提供一致的视觉体验，适合习惯于 VSCode 主题的开发者。 - **Chinese 官方汉化插件**：支持中文界面，降低语言障碍。 - **CodeGlance Pro**：在右侧显示代码概览，便于快速定位代码位置。 - **Color Highlighter**：在代码左侧显示颜色标记，点击即可修改颜色值。 ##### 3.3 配置调试环境 UniApp 支持多端调试（如 H5、小程序、App 等）。在 WebStorm 中配置调试环境时，可以参考以下步骤： - 安装 UniApp 提供的调试工具，例如微信开发者工具或 HBuilderX。 - 在 WebStorm 中配置运行/调试配置： - 路径：`Run > Edit Configurations` - 添加一个新的 `Node.js` 配置，并指定入口文件为 `npm run dev` 或其他相关脚本。 #### 4. 解决常见问题 如果在配置过程中遇到 `@` 别名无法识别的问题，可以按照以下方法解决： - 检查 `webpack.config.js` 文件中是否正确配置了别名路径： ```javascript module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src'), }, }, }; ``` - 确保 WebStorm 的 Webpack 配置路径正确指向 `node_modules/@vue/cli-service/webpack.config.js`[^1]。 #### 5. 示例代码 以下是一个简单的示例代码，展示如何在 UniApp 项目中使用 `@` 别名： ```javascript import HelloWorld from '@/components/HelloWorld.vue'; export default { components: { HelloWorld, }, }; ``` ###