uni-app开发环境搭建&创建uni-app项目

痛定思痛。 2024-04-17 05:26 32阅读 0赞

### uni-app修炼之路（一） ###

*  导语
 *  uni-app开发环境搭建
 *   *   *   *  1.进入官网下载HBuilder-X
             *  2.打开HBuilder-X，进行开发环境配置
 *  创建uni-app项目
 *   *   *   *  快速上手

# 导语 #

**uni-app**使用了快半个月了，现在准备来系统的学习一下**uni-app**，并做一些笔记！

学习的最好方式就是查看官方文档，当然初学者可能会对官方文档比较迷茫，我今后做的笔记也许能够为你解决这些疑惑。

# uni-app开发环境搭建 #

#### 1.进入官网下载HBuilder-X ####

百度搜索**uni-app**，进入[官网][Link 1]，点击**快速上手**，点击下载  
![这是uni-app官网首页，我们点击快速上手，里面有Hbuild-x的下载地址][uni-app_Hbuild-x]  
点击**HBuilderX：[官方IDE下载地址][IDE]**![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]  
点击**DOWNLOAD**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]  
我们下载**开发版** 选择你系统对应的版本下载，下载之后直接**解压安装**就好了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]

#### 2.打开HBuilder-X，进行开发环境配置 ####

打开之后的界面是这样子的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]  
点击**工具**——》**插件安装**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]  
这里就可以安装想要的插件了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]  
点击**工具**–》**主题** 就可以更改主题颜色了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 6]

以Mac为例，点击偏好设置，可以进行如下设置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 7]

# 创建uni-app项目 #

#### [快速上手][Link 2] ####

> 这里我就不重复了，官网有教程，会比我讲的详细，请查看官网教程[快速上手][Link 2]

[Link 1]: https://uniapp.dcloud.io
[uni-app_Hbuild-x]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/41081f6361334395b75d19130b6c7606.png
[IDE]: http://www.dcloud.io/hbuilderx.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/93f3a992fb5048e1aa8a62cd02ab54eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/9a715cefd65c4b278348ce31a0c3309b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/485e0102ce0c49148875a9e759abc9c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/42435fb0080149e686df9c386f7bdec8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/e4284219665d427f90bd6f5b3be55dfe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/ff5176eb517a42babcea543fadf5c6c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/ee68c084e8f340ddb60617a94c2272f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0YXJfb2Zfc2NpZW5jZQ_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/5dfc4736dd1c4e00bcbe9180c613d8c7.png
[Link 2]: https://uniapp.dcloud.io/quickstart