01uni-app 基础教程 环境配置【uniapp 专题 1】，前端开发0基础学习

---

一图胜千言

3.uni-app创建项目的两种方式

---

uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。

1.可视化界面

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：

• HBuilderX：官方IDE下载地址

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。

下载之后解压缩运行exe文件

选择新建项目

选择uni-app类型，输入项目名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有。Hello uni-app，是官方的组件和API示例。还有一个重要模板是uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

2.cli 脚手架

除了HBuilderX可视化界面，也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

环境安装

全局安装vue-cli

npm install -g @vue/cli

创建uni-app

• 使用正式版（对应HBuilderX最新正式版）

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

• 使