创建 uni-app 项目与运行项目

前端开发工程师、技术日更博主、已过CET6
阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。以下是创建和运行 uni-app 项目的步骤：

安装 HBuilderX

HBuilderX 是 DCloud 推出的 IDE，专门用于 uni-app 开发。你可以从以下链接下载并安装它：

https://www.dcloud.io/hbuilderx.html

创建 uni-app 项目

1. 打开 HBuilderX。
2. 点击菜单栏的 文件 -> 新建 -> 项目。
3. 在弹出的对话框中选择 uni-app，填写项目名称和保存路径。
4. 选择项目模板，对于初学者可以选择默认模板。
5. 点击 完成 创建项目。

运行 uni-app 项目

1. 在 HBuilderX 中打开刚刚创建的项目。
2. 点击工具栏上的 运行 按钮，这将打开一个运行环境选择对话框。
3. 根据你的需求选择运行环境，例如 Chrome 浏览器、微信开发者工具、H5、Android 模拟器或 iOS 模拟器等。
4. HBuilderX 会自动编译项目代码，并在所选环境中运行。

使用命令行创建和运行 uni-app 项目

如果你更喜欢使用命令行工具，也可以通过 npm 或 yarn 来创建和运行 uni-app 项目。

安装 uni-app CLI

npm install -g @vue/cli @dcloudio/uni-cli-shared

创建 uni-app 项目

vue create -p dcloudio/uni-preset-vue my-project

运行 uni-app 项目

进入项目目录后，使用以下命令来运行项目：

# 运行在 H5 平台
npm run serve:h5
# 或者
yarn serve:h5

# 运行在微信小程序平台
npm run serve:mp-weixin
# 或者
yarn serve:mp-weixin

# 其他平台类似，具体可以参考官方文档

总结

通过上述步骤，你可以创建并运行一个 uni-app 项目。无论是使用 HBuilderX IDE 还是命令行工具，uni-app 都能帮助你快速开始跨平台应用的开发。记得查看官方文档以获取更多信息和高级用法：https://uniapp.dcloud.io/