在前面的小节中，我们已经对 做了简单的介绍，相信大家都对 有了一定的了解。

本小节带领大家创建第 项目。

创建 项目有两种方式：第一种是通过官方的开发者工具 HBuilder 来创建，第二种是通过 vue-cli 命令行创建。

使用 cli 创建项目，编译器是安装在单独的项目下面的，时需要手动命令，只对这项目生效。

使用 HBuilderX 创建项目，编译器是装在 HBuilderX 的目录下面了，HBuilderX 版本更新，编译器就会一起更新，对所有项目生效。日常开发建议大家直接使用 HBuilder 创建项目就可以了。

HBuilderX 是 官方推出的开发者工具，里面内置了开发环境，不需要额外配置 nodejs 环境，可以帮我们省去很多麻烦。

先来点开官方网址下载 HBuilderX 开发者工具，建议下载App开发版。

HBuilderX：

接下来，我们通过刚刚下载的 HBuilderX 开发者工具创建 项目，要跟着一起操作哦。点击工具栏中的->新建->项目：

会出现弹窗，接下来我们需要选择 类型，输入项目，项目路径，选择合适的模板，点击创建，项目就创建成功啦。

选择模板的时候，有几个模板选项。分别是：

打开 pages/index/index.vue ，将 <template> 的替换成下面的。
实例：

<template>
    <view class="container">
        HelloWorld
    </view>
</template>

我们来将上面的 HelloWorld 运行起来吧。

1. 运行到浏览器

点击工具栏中的运行->运行到浏览器->选择相应的浏览器运行：

选择浏览器之后，HBuilderX 开发者工具会出现正在编译的，第一次运行会慢一点，编译成功后，打开浏览器并项目的。可以看到 HelloWorld 打印出来了。

2. 运行到内置浏览器

点击工具栏中的运行->运行到内置浏览器，会出现 Web 浏览器的弹出框，第一次打开会比较慢，需要耐心等一会才会出现项目的。

3. 运行到手机或模拟器

使用这个需要先用数据线连接手机，否则会“未检测到手机或模拟器，请稍后再试”。

数据线连接手机后，我们再点击工具栏中的运行->运行到手机或模拟器。系统会在我们手机上面安装 HBuilderX 手机版。

在手机上面打开 HBuilderX 手机版，就可以看到 HelloWorld 。

Tips：
如果打开手机版 HBuilderX 没有看到正确的，可以关掉手机应用进程，重新打开看一下。
如果编译出错，点击查看工具栏中的运行->运行到手机或模拟器->真机运行常见故障排除指南，排除。

4. 运行到模拟器

第一次使用模拟器，需要先安装者工具，并在工具栏->运行->运行到模拟器->运行设置中设置者工具安装的路径。

点击工具栏中的运行->运行到模拟器->微信开发者工具，即可在微信开发者工具里面体验 。

在 HBuilderX 里面开发，微信开发者工具里面就可以看到实时。 会将项目编译到根目录的 unpackage/dist 目录下面。

Tips：如果没有成功运行可以做下面的操作。
如果微信开发者工具已经打开，微信开发者工具，重试一下；
如果还是不行的话，建议将微信开发者工具到最新版本；
最后如果启动微信开发工具失败，可以手动在开发者工具中打开HBuilderX控制台中的项目路径。

点击工具栏的运行->运行到模拟器->开发者工具，在开发者工具中打开 HBuilderX 控制台中的项目路径，就可以在开发者工具中体验 。

点击工具栏的运行->运行到模拟器->支付宝者工具，在支付宝者工具中打开 HBuilderX 控制台中的项目路径，就可以在支付宝者工具中体验 。

点击工具栏的运行->运行到模拟器->字节跳动开发者工具，在字节跳动开发者工具中打开 HBuilderX 控制台中的项目路径，就可以在字节跳动开发者工具中体验 。

我们在终端通过 vue-cli 命令行创建 项目，在创建项目之前，需要保证电脑已经配置了 nodejs 环境。

npm install -g @vue/cli

创建正式版项目，对应 HBuilderX 最新正式版，最常用

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

使用 alpha 版项目，对应 HBuilderX 最新 alpha 版，可能不太稳定

vue create -p dclou/uni-preset-vue#alpha my-alpha-project

创建项目的过程中会选择项目模板，一般选择认模板就可以了。

如果想要选择模板，需要先填写 模板地址，这个地址可以是托管在 GitHub 上面的仓库地址，地址格式为 userName/repositoryName，比如 dclou/uni-template-picture 就是下载模板。

更多的下载方式，可以参考这个的说明：download-git-repo

npm run dev:%PLATFORM%

%PLATFORM% 可取值如下：

Tips：
dev 模式编译出的各平台存放于根目录下的 /dist/dev/ 目录，打开各平台开发工具选择对应的平台目录即可进行预览（h5 平台不会在此目录，存在于缓存中）；
build 模式编译出的各平台存放于根目录下的 /dist/build/ 目录，发布时选择此目录进行发布；
dev 和 build 模式的区别：dev 模式有 SourceMap 可以方便的进行断点调试；build 模式进行进行压缩，体积更小更适合发布为正式版应用；进行环境判断时，dev 模式 process.env.NODE_ENV 的转换开发，构建模式 process.env.NODE_ENV 的转换生产。

本节主要介绍了 项目创建的两种方式，本节的重点如下：